CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvertical-alignment
chamini2
chamini2

Reputation: 2918

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.

Upvotes: 1

Views: 4099

Answers (2)

Richard Abercrombie
Richard Abercrombie

Reputation: 313

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/

Upvotes: 1

DavidG
DavidG

Reputation: 119017

A very crude example here, but the basic principle is to set the overlay div to position: absolute; and bottom: 0;. This will force the element to the bottom of it's container and then set the background colour to an rgba value to make it slightly opaque:

.overlay {
    height: 100px;
    width: 320px;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
}

Example: http://www.bootply.com/5l6JQRaNdC

Upvotes: 1

Related Questions