CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JasonTheMarketer
JasonTheMarketer

Reputation: 197

Positioning div at the bottom of the parent div - Bootstrap

I am trying to position a div at the bottom of the containing div. https://prnt.sc/q2iasz

I tried having position: relative for the parent div and position: absolute, bottom: 0 but the code seems not to be working. If I give a fixed-bottom class, the div goes all the way bottom.

Here's my code.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<section class="fluid-container hero position-relative">
  <div class="absolute-wrapper h-100">
    <div class="row bg-white fixed-bottom">
      <div class="container w-50">
        <h1 class="content text-dark">left</h1>
      </div>
      <div class="container w-50">
        <h1 class="content text-dark">right</h1>
      </div>
    </div>
  </div>
</section>

Here's the screenshot. https://prnt.sc/q2ierd

Am I doing something wrong with the positioning?

Upvotes: 1

Views: 4351

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

looks like you will need a custom class aside position-absolute:

.absolute-bottom {bottom:0;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<section class="fluid-container hero ">
  <div class="position-relative">
    <img src="http://dummyimage.com/1200x300&text=fake_img_content" class="col m-auto ">
    <div class="d-flex position-absolute  absolute-bottom w-100 ">
      <div class="container bg-white  w-50">
        <h1 class="content text-dark">left</h1>
      </div>
      <div class="container w-50">
        <h1 class="content text-dark">right</h1>
      </div>
    </div>

  </div> hello
</section>

Upvotes: 2

user7148391
user7148391

Reputation:

fixed-bottom gives the element position:fixed which will make it relative to the viewport

use .position-absolute instead

.hero{
  background:red;
  height:100px; /* to mimic other content which will give the parent height*/
}

.position-absolute{
  bottom:0;
  background:#ffffff7d;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<section class="fluid-container hero position-relative">
  <div class="absolute-wrapper h-100">
    <div class="row position-absolute">
      <div class="container w-50">
        <h1 class="content text-dark">left</h1>
      </div>
      <div class="container w-50">
        <h1 class="content text-dark">right</h1>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Related Questions