Twitter Bootstrap Question posted in

Positioning div at the bottom of the parent div – Bootstrap-Twitter 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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search