'How to align div to bottom inside div bootstrap

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?

htmlcsstwitter-bootstrap


Solution 1:[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

Solution 2:[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-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.

Solution 3:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fahad Subzwari
Solution 2 KreepN
Solution 3 Amir Maleki

Related Questions