Declan Watt Declan Watt - 7 months ago 31
HTML Question

Vertical Align bootstrap text in column

I have a two column layout with nested columns on the left column. How would i vertically align the text in the right column to the middle in bootstrap?

I have tried setting top:50% but nothing happens. And i have also tried using the vertical-align:middle.

<div class="container-fluid">
<div class="row">
<div class="col-lg-6"> <!-- Left Column-->
<div class="row">
<div class="col-lg-6" style="height: 350px; background-color: red;">1</div>
<div class="col-lg-6" style="height: 350px">2</div>
<div class="col-lg-6" style="height: 350px">3</div>
<div class="col-lg-6" style="height: 350px; background-color: red">4</div>
</div>
</div>

<div class="col-lg-6"> <!-- Right Column-->
<div class="box-section">
<h2 class="custom-font font-xx">THIS TEXT<br>
Metals & O-rings</h2>
<h4 class="custom-font font-sub">THIS TEXT</h4>
</div>
</div>

</div>
</div>


Cheers!

Answer

Not sure if it's exactly what you are after.

but you could set the height and then vertical align.

    <div class="container-fluid">
  <div class="row">
    <div class="col-lg-6"> <!-- Left Column-->
      <div class="row">
        <div class="col-lg-6" style="height: 350px; background-color: red;">1</div>
        <div class="col-lg-6" style="height: 350px">2</div>
        <div class="col-lg-6" style="height: 350px">3</div>
        <div class="col-lg-6" style="height: 350px; background-color: red">4</div>
      </div>
    </div>

    <div class="col-lg-6" style="height:700px"> <!-- Right Column-->
    <div class="box-section">
      <h2 class="custom-font font-xx">THIS TEXT<br>
        Metals & O-rings</h2>
      <h4 class="custom-font font-sub">THIS TEXT</h4>
    </div>
  </div>

  </div>
</div>

Then add this css

/* CSS used here will be applied after bootstrap.css */

.box-section
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Problem is it won't be responsive with the set height values, however you could set that up seperately in the css

http://www.bootply.com/FOsl3LiKn1