How can I get a sticky div inside another div using Bootstrap?

Question

I am new to Bootstrap 4 and wondered if it is possible to bind a div to the bottom of its parent div. I use a class .containerwith a class .rowand some child divs:

<div class='container'>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <h3>Title</h3>               
            <p style="text-align: justify">Text</p>
            <h4>Line I want to be fixed to bottom</h4>
        </div>
        <div>...</div>  <!--Similar div--> 
        <div>...</div>  <!--Similar div--> 
    </div> 
</div>

So, each div in .rowgets the height of the highest div, and for others - the remaining space. Now I have something like this:

+------------------++------------------++------------------+
|-------title------||-------title------||-------title------|
|-------text1------||-------text2------||-------text3------|
|-------text1------||-------text2------||--lineIWantToFix--|
|-------text1------||--lineIWantToFix--||-------space------|
|-------text1------||-------space------||-------space------|
|--lineIWantToFix--||-------space------||-------space------|
+------------------++------------------++------------------+

And I want it to be like this:

+------------------++------------------++------------------+
|-------title------||-------title------||-------title------|
|-------text1------||-------text2------||-------text3------|
|-------text1------||-------text2------||-------space------|
|-------text1------||-------space------||-------space------|
|-------text1------||-------space------||-------space------|
|--lineIWantToFix--||--lineIWantToFix--||--lineIWantToFix--|
+------------------++------------------++------------------+

Answer 1

I would use flex.

It is much cleaner, safer (no overlap), scalable (it can be multirow), and it works great on mobile devices.

: https://codepen.io/zalog/pen/qPWZJE

CSS:

html, body { height: 100%; }
.row > div > * { border: 1px solid gray; }

Html:

<div class="container h-100">
  <div class="row h-100">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 d-flex flex-column">
      <h3>title</h3>
      <p>text</p>
      <h4 class="mt-auto">bottom line</h4>
    </div>
    ...
  </div>
</div>

. 100% .

, .

Answer 2

flexbox Bootstrap-4 position: absolute .

.main-col {
  padding-bottom: 70px;
}
.main-col h4 {
  position: absolute;
  bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
    <div class="row d-flex">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 main-col">
            <h3>Title</h3>               
            <p style="text-align: justify">Text</p>
            <p style="text-align: justify">Text</p>
            <p style="text-align: justify">Text</p>
            <p style="text-align: justify">Text</p>
            <p style="text-align: justify">Text</p>
            <h4>Line I want to be fixed to bottom</h4>
        </div>
       <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 main-col">
            <h3>Title</h3>               
            <p style="text-align: justify">Text</p>
            <h4>Line I want to be fixed to bottom</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 main-col">
            <h3>Title</h3>               
            <p style="text-align: justify">Text</p>
            <h4>Line I want to be fixed to bottom</h4>
        </div>
    </div> 
</div>