5

I am new to Bootstrap. I would like to have two columns of text in the same row, but with the first column a substantially bigger font than the second. When I do this, the text in the second column appears to be higher than the first row. I would like the text in both columns to be aligned at the bottom.

Here's an example of what it looks like now. Notice "Atlanta" is aligned vertically way higher than the name "John Doe" http://bootply.com/83705

Alex S
  • 391
  • 2
  • 3
  • 7
  • Like having a separate text field in two columns within the same row, but with each text field a separate font size. For example [NAME] and [STATE], with [NAME] being 40px and [STATE] being 20px. The current result is the smaller font is not aligned vertically with the larger font text field. – Alex S Sep 27 '13 at 22:21

2 Answers2

5

update

<div class="container"> 
     <div class="row" style="border-bottom: 1px solid red;">
        <div class="col-xs-2" style="font-size:35px;">John Doe</div>
        <div class="col-xs-2" style=""><span style="font-size:35px;"></span>Atlanta</div>
      </div>
</div>

--

I don't know if your question has to do with Bootstrap (Bootstrap let your divs float) so see also: How to align content of a div to the bottom?

try to add a padding?

<div class="container"> 
     <div class="row" style="border-bottom: 1px solid red;">
        <div class="col-xs-2" style="font-size:35px;">John Doe</div>
        <div class="col-xs-2" style="padding-top:21px;">Atlanta</div>
      </div>
</div>
Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
5

2 Ways I can think of on the top of my head

1st: Don't use columns, use "display-inline" instead

.inline { display: inline-block !important; }

Depending on your theme, you may also need

.align-bottom { vertical-align: bottom !important }

There might even be a bootstrap class for that. I could only find this:

Bootstrap 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

Bootstrap 3

<ul class="list-inline">
  <li>...</li>
</ul>

DEMO: http://www.bootply.com/nba6HcSDll

2st: If you must use columns, check this out

Equal height columns DEMO: http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height

Tom
  • 556
  • 1
  • 7
  • 16
  • 2
    Why not to use columns while using Bootstrap? That's one of the main features of Bootstrap. Of course he can use them and as for semantic, of course it's recommended to wrap the content by semantics elements as well. – TeeJay Jul 16 '15 at 14:34
  • 1
    Columns use float, that breaks line height. Usually, you want to align text (even with different sizes) to it's baseline. If you use inline or inline-block, you maintain the line. Float will break the line rendering between two floated containers and both texts align to the top. Another way would be to set fixed line height within the floated containers. I don't condone bootstrap columns, but sometimes there are better solutions. Like inline-block elements or display: flex – Tom Jul 20 '15 at 13:50