Bootstrap 4 align bottom

Question

I have a full-page bootstrap layout, and on the first page I need something aligned to middle & bottom. There is a background image (first div), and a darker layer on it (second div).

<div class="h-100 w-100">
<div class="h-100 w-100 text-center">
    <div class="h-100 w-100 d-flex align-items-center">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <h1 style="color:#000;">something</h1>  
            <a href="">
            www.something.com
            </a>
            <p class="tto_cl">
            <span style="font-size: 1.8rem;">123</span>
            </p>
            <span style="text-transform:uppercase; color:#000; letter-spacing: 4px; font-family: Arial;">456</span><br>
            </div>
    </div>
</div>

Jsfiddle: https://jsfiddle.net/543r2dcs/2/

They are aligned center perfectly, but I need something to bottom.

I want the 456 to the bottom of the div, but this new flexbox system is unusual to me.

At the bottom of *which* div? Because that span is at the bottom of it's parent...I suspect your demo does not show the whole problem. Is the container supposed to be full page...because it's not in your demo? — Paulie_D, Jan 22 '18 at 22:58
Ohh...and you can't align everything to the center AND have something aligned to the bottom...flexbox doesn't work that way. — Paulie_D, Jan 22 '18 at 22:59

score 3 · Answer 1 · answered Jan 22 '18 at 22:50

3

Bootstrap has a very handy .align-bottom class. You can read about it here

<span class="align-bottom">bottom</span>

answered Jan 22 '18 at 22:50

Bailey Pumfleet

66
1
4

2

I've tried it before, does not work. – nervus Jan 22 '18 at 22:52
@nervus hmm, that's weird.. it's worked fine for me before, and it aligns it to the bottom center. – Bailey Pumfleet Jan 22 '18 at 22:53
1

And I want a pic to the bottom too, not just the text :/ – nervus Jan 22 '18 at 22:54
2

The `align-bottom` class use the `vertical-align:bottom` property/value, and that will have no effect on flex items. – Asons Jan 23 '18 at 14:51
2

You have to break out of Bootstrap4 - it uses CSS's notoriously flawed vertical alignment, hence won't work in DIVs. – MC9000 Aug 26 '18 at 11:46

score 1 · Answer 2 · answered Jan 22 '18 at 23:57

1

Set the parent element position: relative then set the poisition for the element you want to be down the bottom to position: absolute then set its bottom to 0 bottom: 0 this will position it to the bottom of its parent container this might also break how you are centering the element so you will have to add left: 0 and right: 0

answered Jan 22 '18 at 23:57

Smokey Dawson

8,827
19
77
152

The problem is that this is not responsive. Bootstrap really needs to fix this bug. align-bottom should work for nested divs, period. Makes no sense they've ignored this for 4 releases! – MC9000 Aug 26 '18 at 12:02

score 0 · Answer 3 · edited Jan 23 '18 at 02:36

0

If you want it to be vertically centered, use my-auto margin y auto, which brings it to the center

edited Jan 23 '18 at 02:36

Nubok

3,502
7
27
47

answered Jan 22 '18 at 23:21

aman sharma

17
2

It is vertically centered. I want the span align to the bottom. – nervus Jan 22 '18 at 23:25

Bootstrap 4 align bottom

3 Answers3

Linked