CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Declan Watt
Declan Watt

Reputation: 71

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!

Upvotes: 1

Views: 199

Answers (2)

Jos&#233; Gazzano
Jos&#233; Gazzano

Reputation: 114

I think that AceWebDesign answer is correct but you can achieve the same effect without setting the right column height and with the box section class as this:

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

forked snippet: http://www.bootply.com/84dXtE0F2B

Upvotes: 1

AceWebDesign
AceWebDesign

Reputation: 589

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

Upvotes: 2

Related Questions