Bootstrap 4 Flexbox force rows to fill vertical space inside col

Question

I am trying to build a video player in Bootstrap 4 using two columns, one containing the video, and the other containing rows with a thumbnail and title. The problem I am having is that the rows are not filling the vertical space of their parent column. What is the correct way to use flexbox helper classes to create a right column that will fill the vertical space regardless of how few items there are? or is there a more efficient way to do this in Bootstrap 4?

This is the desired layout I am looking for

<div class="container">
  <div class="row">

    <!-- Main video player -->
    <div class="col-12 col-sm-8">
      <img class="img-fluid" src="http://via.placeholder.com/730x411">
    </div>

    <!-- Video Selector -->
    <div class="col col-sm-4 d-none d-sm-block ">
      <div class="row">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video One</div>
      </div>
      <div class="row">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video Two</div>
      </div>
    </div>

  </div>
</div>

Answer 1

As of Bootstrap 4.1.0, the Flex grow utilities are included. Just change the 2nd column to <div class="col col-sm-4 d-none d-sm-flex flex-column">, and then add flex-grow-1 to the rows. The rows on the right will auto fill the height.

https://codeply.com/go/CaJxOgoFHX

<div class="col col-sm-4 d-none d-sm-flex flex-column">
    <div class="row flex-grow-1">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video One</div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video Two</div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video Three</div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video Four</div>
    </div>
</div>

Note: This uses Bootstrap 4.1.0 which includes the flex-grow-1 class.

---

Related: Flexbox 3 divs, two columns, one with two rows

Answer 2

Bootstrap version >= 4.1.1.

On its parent, add the d-flex and flex-column classes. That means you must remove the d-sm-block class because in the presence of d-sm-block, d-flex does not work. And then, add the flex-grow-1 to the two rows.

---

There are two rows here and they take half of the available space.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">

  <div class="row">
    <!-- Main video player -->
    <div class="col-12 col-sm-8">
      <img class="img-fluid" src="http://via.placeholder.com/730x411">
    </div>

    <!-- Video Selector -->
    <div class="col col-sm-4 d-none d-flex flex-column">
      <div class="row flex-grow-1">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video One</div>
      </div>
      <div class="row flex-grow-1">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video Two</div>
      </div>
    </div>

  </div>
</div>

Check this pen on codepen or run the code snippet.

---

There is one row here but still it takes all the available space.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <!-- Main video player -->
    <div class="col-12 col-sm-8">
      <img class="img-fluid" src="http://via.placeholder.com/730x411">
    </div>

    <!-- Video Selector -->
    <div class="col col-sm-4 d-none d-flex flex-column">
      <div class="row flex-grow-1">
        <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
        <div class="col-sm-9 bg-success">Video One</div>
      </div>
    </div>

  </div>
</div>

FYI, If you want that one of the rows takes as much space as it needs and the other takes all the available space, use flex-grow-1 on the latter one only.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">

    <div class="row">
<!-- Main video player -->
        <div class="col-12 col-sm-8">
            <img class="img-fluid" src="http://via.placeholder.com/730x411">
        </div>

<!-- Video Selector -->
        <div class="col col-sm-4 d-none d-flex flex-column">
            <div class="row flex-grow-1">
                <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
                <div class="col-sm-9 bg-success">Video One</div>
            </div>
            <div class="row ">
                <div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
                <div class="col-sm-9 bg-success">Video Two</div>
            </div>
        </div>
    </div>
</div>

---

Bootstrap version 4.

Bootstrap version 4 does not have the flex-grow-1 class. In that case, use the code below.

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}