Bootstrap, align content of a div to bottom

Hi there,

I can’t seem to find a way to align the content of a div to the bottom of the ROW in Bootstrap.
I’ve been able to get the result only for some elements of my code, but not for one div.

As you can see in this Bootstrap example, I can align two empty divs to the bottom, but if I apply the same technique for the COL-LG-3 div, it doesn’t work.
Bootply:
http://www.bootply.com/ypyG3cFPGo

Desired alignment:
https://s29.postimg.org/wbnld6ltj/desidered_alignment.png

Try this

<img class="img-fluid" src="http://placehold.it/960x960" alt="" style="margin-top: 95px;">

Thank you, liontas76

That would work only with fixed size, though.
I should have mention the layout is supposed to be responsive, as well as the images.

1 Like

Come out of Bootscrap. Create a {display:table; width:100%;} with three columns. Add percent widths and {vertical-align:bottom} to the columns.

4 Likes

ronpat,

It works great!
I only have one thing to fix now, which is the width of the table as it seems it doesn’t match the 100% width of the other Bootstrap containers:
http://www.bootply.com/WzKEbj8TnG

If it becomes too much of a hassle, I might just convert all the divs to tables.

To the div with display:table; also apply {table-layout:fixed}. In that way, the table will obey the cell widths without regard to their contents.

See if that helps. (I do not know how to manipulate the code in the service that you are using (Bootply) to test what I am suggesting. Sorry.)

Thank you, ronpat.

Unfortunately, it didn’t work.

P.S. In bootply you should be able to tweak the code by just typing in, as in CodePen or JSfiddle, and to check the result you simply click run on the top left.

I clicked the fork button. Can you see this?
http://www.bootply.com/wxZJovrQ1c

The .container class cannot be nested.

1 Like

Awesome!
Thank you so much, ronpat!

For years I thought to avoid tables, but the one you showed me seems a different approach and now I’m very interested in it.
I’m going to read this:

Thanks again.

Best,
Andrew

1 Like

I moved forward with the code and only now I realized the page doesn’t work in IE11.
Chrome & FF no problem, the page is still responsive.
In IE when I use the display:table the content makes the horizontal scrollbar appear.
This is noticeable also from the bootply above:
http://www.bootply.com/wxZJovrQ1c

Here is the example for your query… I think this is what you were wondering for…

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="http://www.example.com" />
    </div>
    <div class="bottom-align-text col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

use the following CSS:

@media (min-width: 768px ) {
  .row {
      position: relative;
  }

  .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

Thanks for chiming in.

I tried the code, but it doesn’t work:
http://www.bootply.com/8DrRwcX2bf

As you can see in the demo above, the smaller image is now aligned to the right and the third column is pushed up.

Removing right: 0; from the CSS doesn’t help either, as now the smaller image is aligned to the left whereas it is supposed to come right after the bigger image.

verysame,

Coding for IE11 is worse than coding for IE7.

See if this example helps.

bootstrap-vs-IE11 v2.html (2.0 KB)

FYI: When writing a one row css table, one does not need to use a table-row.

1 Like

Once again, thank you so much, Ronpat!
Your html helped a lot.

I’m realizing that IE11 is giving me several troubles, I’m wondering if should ditch it completely at this point.
Luckily, the compatibility with IE11 is not 100% mandatory and from the market stats, IE in general is way behind the competitors.
Perhaps Edge will do better, but I guess it will also have a more modern support.

Thank again.

Best,
Andrew

1 Like

I wouldn’t abandon IE11 just yet. It is still a significant player and is still leading Windows Edge in usage.

http://gs.statcounter.com/#browser-ww-monthly-201512-201612-bar

In the stats I was looking at IE was about at 4%, from the one you pointed at the situation is different indeed.
I guess I have to reconsider it then :sweat:

Finally!

They just released the new build, alpha 6 with full support for Flexbox.
Compatible with IE11 (they dropped IE9).

Just for future ref in case someone else is having similar issues, now we can use:

class="d-flex align-items-center"
class="d-flex align-items-baseline"

and so on.
https://v4-alpha.getbootstrap.com/utilities/flexbox/

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.