How to align div to bottom inside div with Bootstrap? - html

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/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/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-1</div>
<div class="p-2">Flex item-2</div>
<div class="p-2">Flex item-3</div>
</div>
<div class="d-flex align-items-end flex-column bg-info" style="height: 200px;">
<div class="p-2">Flex item-a</div>
<div class="p-2">Flex item-b</div>
<div class="mt-auto p-2">Flex item-c</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.

Answer 3

When using Bootstrap grid system, my go-to solution is like this:
add d-flex to each col-*
add d-flex flex-column to each card-body
add mt-auto mx-auto to the last element (or last div of elements) I want to stick to the end
This prevents any further styling mess-up in my opinion.

Answer 4

Relevant Documentation:
Flex Alignment in Bootstrap 5.0: https://getbootstrap.com/docs/5.0/utilities/flex/#align-items
Vertical Alignment in Bootstrap 5.0: https://getbootstrap.com/docs/5.0/utilities/vertical-align/
Relevant Code:
What worked for me to align a div (of text) at the bottom of a row/container
<div class="d-flex align-content-end flex-wrap mb-2">
<span class="display-4 fw-bold text-black text-start mt-0 mb-0">Active Mural Projects</span>
</div>