Use full column height within a row

Question

Is there a possible way to adopt a row to have full column height in bootstrap? I would like to use the whole white space inside the row and add it within the col-xs-3 column heights.

Here is an example:

Please let me know if you need more information.

Please post the code too – Carol Skelly Jan 02 '19 at 17:34 — Carol Skelly, Jan 02 '19 at 17:34

tao · Accepted Answer · 2019-01-02T18:00:25.070

Bootstrap's grid system allows for .rows to be children of .container (or .container-fluid) and for .col-*-*s to be children of .rows. Furthermore, .col-*-*s can parent other .rows.

By default, a .rows height is determined by its columns. If you want it to have a particular height, you can apply it using custom CSS (min-height + display: flex - which makes all cols on a row wrap stretch to same height):

.row.my-row {
  min-height: 100vh; /* viewport (screen) height */
  display: flex; /* makes its cols expand to full height */
  flex-wrap: wrap;
 }

If, for example, you want to deduct top bar's height from row's minimal height, you could use min-height: calc(100vh - 60px) - where 60px is menu's height.

Use full column height within a row

1 Answers1