Search code examples
htmlcsstwitter-bootstrapvertical-alignment

Align text to bottom inner part of image in bootstrap grid

I need to have a grid in bootstrap with .rows and .cols that would be images 320x320, inside these images I need the put text with a dark background and some white text, something like this.

Solution

  • Essentially youd have a container with the "position: relative;" style and the footer text would have a "position: absolute; bottom: 0; left: 0" style. To get the somewhat transparent bg color youd use rgb(0,0,0,.5) where .5 would be half transparent (or opaque). Below is how you'd do it with bootstrap 3.

    The HTML would look similar to this:

    <div class="container">
    <h1>stuff</h1>
    <p>Some stuff here</p>
        <div class='row'>
            <div class='col-xs-4'>
                <div class='img-container'>
                    <img src="http://a1.dspnimg.com/data/l/509084866423_rd0gX45i_l.jpg" alt="" />
                    <div class='img-footer'>
                        <p>Image Footer text</p>
                    </div>    
                </div>        
            </div>
            <div class='col-xs-4'>
                <div class='img-container'>
                    <img src="http://a1.dspnimg.com/data/l/509084866423_rd0gX45i_l.jpg" alt="" />
                    <div class='img-footer'>
                        <p>Image Footer text</p>
                    </div>    
                </div>        
            </div>
            <div class='col-xs-4'>
                <div class='img-container'>
                    <img src="http://a1.dspnimg.com/data/l/509084866423_rd0gX45i_l.jpg" alt="" />
                    <div class='img-footer'>
                        <p>Image Footer text</p>
                    </div>    
                </div>        
            </div>            
        </div>
    </div>            
</div>

    Whereas the Css would look something like this:

    div[class^="col-"] {
    margin: 0 !important;
    padding: 0 !important;
    border: solid black 5px;
}

.img-container {
    position: relative;

}

.img-container img {
    height: 100%;
    width: 100%;
}

.img-container .img-footer {
    position: absolute;
    bottom: 0; left: 0;
    padding: 0 10px;   

    width: 100%;

    color: #fff;
    background: rgba(0,0,0,0.7);   
}

    Here is a running JSFiddle: https://jsfiddle.net/DTcHh/4498/