CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Misha Griffiths-Prasolova
Misha Griffiths-Prasolova

Reputation: 322

Putting text on bottom of Bootstrap row next to image

I have a row where I have one 2-wide column for an image and a 10-wide for other content (navbar, etc.). The text is separate from the image as desired and on the same row, but I want the text to be on the same 'line' as the image (on the same horizontal plane as the bottom of the image). I've tried absolute-relative positioning and many other methods but I cant seem to get it working. What's the best method?

<div class="row">
    <div class="col-md-2">
        <img src="../logo.png" width="100%" height="100%">
    </div>
    <div class="col-md-10">
        <p>test text</p>
    </div>
</div>

Upvotes: 1

Views: 1648

Answers (2)

brance
brance

Reputation: 1178

Add a class to the second div like this.

<div class="row">
    <div class="col-md-2">
        <img src="../logo.png" width="100%" height="100%">
    </div>
    <div class="col-md-10 position_me">
        <p>test text</p>
    </div>
</div>

And now you can add something like this:

.position_me { position: relative; } .position_me p { position: absolute; bottom: 0; left: 0; }

Now your text should be at the bottom of the image.

Upvotes: 1

user2183919
user2183919

Reputation: 73

I guess you want to add caption on top the image.

Try using the css float element.

img{
    float:right;
}

If this does not work try setting the row position type to relative position and the col objects to absolute position so you will have control within the row.

I hope one of those methods will solve your problem. And if not take a look on this site: http://webdesign.about.com/od/graphics/ht/caption_images.htm

which explains how to add captions on images using css.

Upvotes: 0

Related Questions