Bootstrap 3 - Vertically Algn Row Content

Question

I have a row in Bootstrap. Within this row, I have three columns. The first column has an input field. The second column has some text. The third column has another input field. You can see this layout in this Bootply, which includes this code:

<div class="container">
  <div class="row">
    <div class="col-xs-6">
<div class="row">
  <div class="col-xs-5">
    <div class="form-group">
      <label for="Minimum">Minimum</label>
      <div class="input-group">
        <input class="form-control" data-val="true" id="Minimum" name="Minimum" type="text" value="0">
      </div>
    </div>
  </div>

  <div class="col-xs-2 text-center"><p>Up To</p></div>

  <div class="col-xs-5">
    <div class="form-group">
      <label for="Maximum">Maximum</label>
      <div class="input-group">
        <input class="form-control" data-val="true" id="Maximum" name="Maximum" type="text" value="100">
      </div>
    </div>
  </div>
</div>      
    </div>
  </div>
</div>

I'm am trying to figure out how to vertically align the "Up To" text in the middle column. I want to vertically align the text against the bottom of the row. How can I do that?

The link seems to be broken. – Dan Philip Bejoy Mar 29 '17 at 12:16 — Dan Philip Bejoy, Mar 29 '17 at 12:16
@DanPhilip I just tried the link and it worked for me. – user687554 Mar 29 '17 at 12:19 — user687554, Mar 29 '17 at 12:19
Its working now. Never mind – Dan Philip Bejoy Mar 29 '17 at 12:20 — Dan Philip Bejoy, Mar 29 '17 at 12:20

score 0 · Answer 1 · answered Mar 29 '17 at 12:13

0

The line height for the table rows is 34px, so setting your line height for that element to 68px would vertically align it.

answered Mar 29 '17 at 12:13

mayersdesign

5,062
4
35
47

score 0 · Answer 2 · answered Mar 29 '17 at 12:19

You can add a class on your row and set display: table;

Then you add another class on your 3 divs and set display: table-cell;and float: inherit; and a last class on your element you want to align vertically and set vertical-align: middle;

Updated Bootply

Bootstrap 3 - Vertically Algn Row Content

2 Answers2