CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
JoshRicha
JoshRicha

Reputation: 311

How do I align images to the bottom of a nested div (in bootstrap)?

I want to align different size images to the bottom of a div but the images are also in their own divs so the other answers don't work.

I have the following HTML:

    <div class="row footer-links">
        <section>
            <div class="col-md-4">
                <p>
                    Proudly presented and sponsored by
                </p>
            </div>
            <div class="col-md-8 col-xs-12 logo-links">
                <div class="row logo-bottom">
                    <div class="col-md-2 col-xs-12 logo-border col-md-offset-1">
                        <img id="rasv" class="center-block" src="img/rasv.png" alt="RASV logo">
                    </div>
                    <div class="col-md-2 col-xs-12 logo-border">
                        <img class="center-block" src="img/victoria-farmers.png" alt="Victoria Farmers logo">
                    </div>
                    <div class="col-md-2 col-xs-12 logo-border">
                        <img class="center-block" src="img/anz.png" alt="ANZ logo">
                    </div>
                    <div class="col-md-2 col-xs-12 logo-border">
                        <img class="center-block" src="img/pwc.png" alt="PWC logo">
                    </div>
                    <div class="col-md-2 col-xs-12 logo-border">
                        <img class="center-block" src="img/vac.png" alt="VAC logo">
                    </div>
                </div>
            </div>
        </section>
    </div>

I used the following CSS:

.logo-border {
    border-right: 1px solid #d1d3d4;
    height: 54px;
    vertical-align: bottom;
    display: table-cell;
}

Here is a Code Pen for more information.

Upvotes: 2

Views: 1811

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241198

You were really close.

The reason it wasn't working was because the columns are floated. Due to this, the elements weren't behaving like a table-cell, therefore rendering vertical-align: bottom useless.

You could simply add float: none and it will work as desired.

Updated Example

.logo-bottom .logo-border {
  border-right: 1px solid #d1d3d4;
  height: 54px;
  vertical-align: bottom;
  display: table-cell;
  float: none;
}

As a side note, I increased the specificity of the selector .logo-border to .logo-bottom .logo-border so that float: left was overridden.

Upvotes: 2

Related Questions