CODEWITHSUNDEEP
twitter-bootstrap
Pluc
Pluc

Reputation: 2929

How to vertically fill a row?

Is it possible to make columns vertically fill the remaining space within a row and/or vertically center without a specific row or column height?

<div class="fluid-container">
    <div class="row">
        <div class="col-sm-6">This<br />Column<br />Has<br />Many<br />Lines<br />...<br />...<br />...<br />...</div>
        <div class="col-sm-6 blueBackground">This be should centered and/or fill the background blue all the way to the last line of the first column</div>
    </div>
</div>

Upvotes: 2

Views: 3864

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9486

You can give the grid system the css table properties, like this:

HTML

<div class="fluid-container">
    <div class="row row-same-height">
        <div class="col-sm-6 col-sm-height">This<br>Column<br>Has<br>Many<br>Lines<br>...<br>...<br>...<br>...</div>
        <div class="col-sm-6 col-sm-height blueBackground">This be should centered and/or fill the background blue all the way to the last line of the first column</div>
    </div>
</div>

CSS

.blueBackground {
    background-color: blue;
  }
  .col-sm-height {
        display: table-cell;
        float: none !important;
    }
  .row-same-height {
    display: table;
    width: 100%;
}

Working Example

You can read about it more here, and see examples how you can make it responsive with media-queries: Bootstrap 3 responsive columns of same height

Upvotes: 2

Related Questions