1

Issue is that i am trying to vertically align text within neighboring divs in a bootstrap 3 row where one cell has text of varying size. the text in neighboring cells aligns along the top, but i need it to align along the bottom.

Fiddle of the problem: http://www.bootply.com/GqKdUa9uxT

Yes, i have searched and have surprisingly not found an adequate answer: vertical-align with Bootstrap 3 does not help for example as i am trying to align the text, not the div.

thanks, airyt

Community
  • 1
  • 1
airyt
  • 354
  • 2
  • 9

2 Answers2

0

You can align text to the bottom in the right div by using "position:relative" for parent div and "position:absolute" for a child, then you can adjust the position by changing the value of a bottom property according to your need. The HTML code:

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      Here is some text (Text A) <span style="font-size: 40px">Text B</span>
    </div>
    <div class="col-sm-6 bottom-align">
      This text needs to be (bottom) ed with Text A in previous cell.
    </div>
  </div>
</div>

and the CSS styling:

  .row {
      position: relative;
  }

  .bottom-align {
    position: absolute;
    bottom: 0px;
    right: 0;
    border-bottom: 1px solid red;  
  }
.border{
    border-bottom: 1px solid blue; 
}

Please check the fiddle:

http://jsfiddle.net/johannesMt/craLuLpb/

johannesMatevosyan
  • 1,974
  • 2
  • 30
  • 40
  • Close! but the text in the 2nd cell is actually BELOW the text in the first cell. What i am looking to achieve is to have the bottom of the text of the 2nd cell line up perfectly with the bottom of all the text in the first cell. – airyt Sep 16 '15 at 19:39
  • then you can adjust the value of "bottom" property, otherwise the texts from left have a different line-heights and font-sizes. – johannesMatevosyan Sep 17 '15 at 17:42
0

You can't vertically align floated wrappers, you need to change it to inline element.

DEMO

.col-sm-6 {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  width: 50%;
}
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      Here is some text (Text A) <span style="font-size: 40px">Text B</span>
    </div><div class="col-sm-6">
      This text needs to be (bottom) aligned with Text A in previous cell.
    </div>
  </div>
</div>

Don't use .col-sm-6 since this will overwrite bootstrap grid system, give it another name

slashsharp
  • 2,823
  • 2
  • 19
  • 26
  • Thanks for the response. i can see it working in your code snippet, but not on mine: http://www.bootply.com/kbV3mpTfbQ sorry - doesn't the div need to be floated in order to star in the bs grid system? – airyt Sep 16 '15 at 19:34