How to align element to bottom in a Bootstrap column?

Question

I need to align a box to the left bottom of the bootstrap column. Thank you for help.

The problem is that the column has no defined height.

parent in relative, and box in absokute and left:0 and bottom:0 — Álvaro Touzón, Jul 31 '17 at 08:09
Possible duplicate of [Align button at the bottom of div using CSS](https://stackoverflow.com/questions/5817233/align-button-at-the-bottom-of-div-using-css) — Mohammad Usman, Jul 31 '17 at 08:11
The problem is that the .col-6-md has no defined height... okay, I'll post — Radek Homola, Jul 31 '17 at 08:13
You will need to make height of both columns same. And then place button with position absolute. [Here](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) is another post that will be helpful for you. — Mohammad Usman, Jul 31 '17 at 08:15
position:absolute, left:0, bottom:0 should do the trick. But you need to check before asking, this is fairly simple and probably a duplicate question — Atilla Arda Açıkgöz, Jul 31 '17 at 08:19
I know that, but it works only if you have the height defined. Not a bootstrap column stuff. — Radek Homola, Jul 31 '17 at 08:20

score 15 · Answer 1 · answered Jul 31 '17 at 08:29

You can make the column a flexbox and align the element to the end.

.row {
  background: red;
}

.col-6-md {
  background: lightblue;
  height: 200px;
  display: flex;
}

.bottom {
  background: green;
  align-self: flex-end;
  width: 100px;
  height: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-6-md">
    <div class="bottom">Bottom</div>
  </div>
</div>

score 9 · Answer 2 · answered Jun 16 '20 at 18:09

9

in Bootstrap 4, you can use mt-auto on the column itself to align an item to the bottom. It should already be aligned to the left by default

answered Jun 16 '20 at 18:09

R-D

566
6
13

Works in Bootstrap 5 as well, thanks! BR – Roar S. Nov 14 '22 at 21:31

score 3 · Accepted Answer · answered Jul 31 '17 at 09:15

.bottomdiv {
    border: 1px solid red;
    height: 50px;
    width: 50px;
    position:absolute;
    left:0;
    bottom:0;
}
.col-md-6.col-sm-6.col-xs-6 {
    display: table-cell;
    height: auto;
    border: 1px solid black;
    float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
       <div class="parent">
        <div class="col-md-6 col-sm-6 col-xs-6">
             <div class="bottomdiv">
             </div>             
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</div></div>

Some explanation would make this a better answer. See [answer]. — isherwood, Feb 02 '23 at 14:15

score 2 · Answer 4 · answered Nov 09 '20 at 03:36

2

In Bootstrap 4

For all the columns in the entire row use align-items-end class on the row

For a single column us align-self-end on the col

Docs: https://getbootstrap.com/docs/4.0/utilities/flex/#align-items

answered Nov 09 '20 at 03:36

Yevgeniy Afanasyev

37,872
26
173
191

score 1 · Answer 5 · edited Sep 04 '19 at 11:00

1

You can also try using the absolute CSS functionality

.bottom {
   position: absolute;
   bottom: 0;
   left: 0;
}

then check the position, alter it to suite you

edited Sep 04 '19 at 11:00

Muhammet Madraimov

117
10

answered Jul 31 '17 at 08:50

Lord Kay

35
2

score -1 · Answer 6 · answered May 29 '22 at 16:32

-1

So it was pretty cool:

.bottom{
    position:absolute;
    bottom: 0.99rem;
}

answered May 29 '22 at 16:32

Jeova Guilherme Carvalho Filho

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 30 '22 at 01:22

score -4 · Answer 7 · answered Mar 25 '19 at 00:58

-4

If you don't want to play with css you can just set:

class="mb-0"

It will set margin bottom to zero and should drop your content to the bottom of whatever cell it's in You can align it in other directions similar way: mb, mt, mr, ml

answered Mar 25 '19 at 00:58

mariubog

1,498
15
16

How to align element to bottom in a Bootstrap column?

7 Answers7