Limitless Limitless - 2 months ago 6
CSS Question

Vertical align entire row in Bootstrap 3

I'm trying to vertically center a Bootstrap 3 row. I've got no other content on the site other than the HTML you see here. So far it hasn't really worked.

I also tried some codes that I found on the internet, but none of them seem to work. As you can see, I tried to wrap everything after the container in a separate

div
so the row would center inside it. It doesn't work, sadly.

<?php include_once ("header.php") ?>

<div id="bg"><div>

<div class="container">
<!-- Navigation area -->
<?php include_once ("navigation.php");?>
</div>

<div class="container">
<div class="vertical">
<div id="fade" class="about-wrapper animated fadeInLeft">
<div class="row">
<div class="col-xs-6 nova">
<img class="img-responsive" src="../covers/nova-about.png" alt="" />
</div>
<div class="col-xs-6 opa">

<div class="title">
<h3>Leo</h3>
</div>

<div class="title">
<h3>Age 7</h3>
</div>

<div class="title">
<h3>Character</h3>
</div>

<div class="describ">
<p>
Leo is calm, playful and a tiny guard dog. He is very social and loves to play with other dogs.
<br> He gets a little greedy when you caress him but he can also like it to relax alone on the couch. Overall a Dream dog to have and we are lucky he is ours.
</p>
</div>

<div class="title">
<h3>Introduction to the Family</h3>
</div>

<div class="describ">
<p>
Leo was our first dog we had. We nearly took a different one but as she was reserved, he "puppy-eyed" his way into Roannes heart.
<br> His young appearence made him even more sympathetic and he enjoyed it instantly with his new Family.
<br>
<br><strong>Fun fact:</strong> I randomly met the real owner in the bus and he told me leo was only sent to SPA because he cant be alone in the house and was making too much noise. Well, lucky us!
</p>
</div>

</div>

</div>
</div>
</div>
</div>


<?php include_once ("footer.php") ?>


The CSS:

.vertical {
display: inline-block;
vertical-align: middle;
float: none;
}


To clear things up, I want the row itself to be centered so that I don't have to play around with
top: 25vh
as I think it might be too inconsistent.

Answer

The following CSS seems to be giving the desired result:

.row {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

Check out the fiddle that I made for this problem: https://jsfiddle.net/2678jhbh/2/