CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Artem Ilin
Artem Ilin

Reputation: 375

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

I am new to Bootstrap 4 and was wondering if it's possible to stick a div to the bottom of its parent div. I use class .container with class .row and 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 every div in the .row get the height of the highest div and for others there is a space left. Now I have something like that:

+------------------++------------------++------------------+
|-------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 that:

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

Upvotes: 4

Views: 2173

Answers (2)

zalog
zalog

Reputation: 723

I would use flex.

It's much cleaner, safer (no overlaps), scalable (it can be multirow) and it works fine on mobile too.

Here is my solution: https://codepen.io/zalog/pen/qPWZJE

No fancy 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>

You may have a dynamic height on your text or bottom line, and will never overlap. But, you must prepare all your parents to have 100% height for our flex to work.

I hope it help you.

Upvotes: 2

Manish Patel
Manish Patel

Reputation: 3674

You can used flexbox functionally in Bootstrap-4 and set position: absolute to set sticky element. 

.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>

Upvotes: 1

Related Questions