In bootstrap 4 how to get a row or column to expand to full height within the parent container?

user_618157 0
Viewed 118

Trying to get a row (article tags) to go to the bottom of the parent container. Basic layout looks like this:

<div class='row mb-3'>
    <div class='col-3'> [ thumbnail image goes here ]</div>
    <div class="col-9'>
      <div class='row'>
        <div class='col-12>Article title</div>
      </div>
      <div class='row'>
        <div class='col-12>Article excerpt</div>
      </div>
      <div class='row'>
        <div class='col-12>Tags: tag1, tag2, tag3</div>
      </div>
    </div>
</div>

The excerpt row will have varying amounts of text in it. How can I get the tags row to be at the bottom of the col-9 column?enter image description here

@Zim's answer below seems to get close, but the middle column that should expand to the height of the parent container (row with thumbnail image) goes full page height instead:

enter image description here

The tags row is down at the bottom of the page window. With multiple rows being output the tags row is way down in the next row's content.

bootstrap-4 twitter-bootstrap
1 Answers
  1. Use min-vh-100 and flex-column on the parent row
  2. Use flex-grow-1 to fill the height
<div class="container-fluid">
    <div class="row">
        <div class="col-3"> [ thumbnail image goes here ]</div>
        <div class="col-9">
            <div class="row flex-column min-vh-100">
                <div class="col-12">Tags: tag1, tag2, tag3</div>
                <div class="col-12 flex-fill">Article title</div>
                <div class="col-12">Article excerpt</div>
            </div>
        </div>
    </div>
</div>

EDIT

Based on the comments, to grow in height of the adjacent column instead of viewport height...

   <div class="row">
        <div class="col-3 bg-warning">
            [img]
        </div>
        <div class="col-9">
            <div class="row flex-column h-100">
                <div class="col flex-grow-0">Tags: tag1, tag2, tag3</div>
                <div class="col flex-fill bg-success">Article title</div>
                <div class="col flex-grow-0">Article excerpt</div>
            </div>
        </div>
   </div>

Demo

user_1714560
Related