How to align div to bottom inside div bootstrap

Question

html, body, .sidebar-container, .sidebar-row {      height: 100%;  }    .sidebar {      background-color: #2C3544;  }    @media (min-width: 992px) {      .sidebar {          position: fixed;          top: 0;          left: 0;          bottom: 0;          z-index: 1000;          display: block;          background-color: #2C3544;      }  }  img{      margin: auto;      display: block;  }  .sidebar-image{      margin-top: 15px;  }  .sidebar-items{      margin-top: 15px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>    <div class="container-fluid sidebar-container">      <div class="row sidebar-row">          <div class="col-md-2 sidebar">              <div class="container-fluid">                  <div class="col-md-12 sidebar-image">                      <img src="assets/logo-white.png" width="75px" height="75px"/>                  </div>              </div>              <div class="row sidebar-items">                  <div class="col-md-12">                      <ul class="list-group">                          <li class="list-group-item">Dashboard</li>                          <li class="list-group-item">Projects</li>                          <li class="list-group-item">Statistics</li>                      </ul>                  </div>              </div>              <div class="row align-bottom">                  hafldjalfjsdlfsjdlfsjlfs              </div>          </div>          <div class="col-md-10 offset-md-2 content">              Main Content          </div>      </div>  </div>

I wrote this HTML/CSS code trying to align a div to the bottom inside another div:

I want to align this last div in the col-md-2 to the bottom of the sidebar-container which height is 100%. I tried adding the bootstrap class align-bottom but somehow this doesn't work. Could anyone help me out?

Answer 1

Suppose you have 2 divs. Div A(Outer) and Div B(Inner). To achieve your task just place Div B code in Div A code and in Div B css class add this

position : absolute bottom   : 0 

Answer 2

You can also just use bootstrap flexbox to do this.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>  <div class="d-flex align-items-start flex-column bg-success" style="height: 200px;">   <div class="mb-auto p-2">Flex item</div>   <div class="p-2">Flex item</div>   <div class="p-2">Flex item</div> </div>  <div class="d-flex align-items-end flex-column bg-info" style="height: 200px;">   <div class="p-2">Flex item</div>   <div class="p-2">Flex item</div>   <div class="mt-auto p-2">Flex item</div> </div>

align items to the left or right make sure that you include the entire d-flex align-items-end flex-column on the parent element and choose start or end depending if you want it to be aligned left or right.

align item to the bottom Then, use mt-auto on the div that you want to stick to the bottom of the parent.