Solved

Bootstrap image static caption

Posted on 2014-10-17
2
206 Views
Last Modified: 2014-10-20
Hello Experts,

Here is a the full code below.

http://codepen.io/exceptional/pen/qAmIE

This is a simple two column (Bootstrap) responsive layout.
I use the "push" and "pull" classes on each column in order to decrease the gap between the two columns.

What I am trying to achieve is:

Absolute position the caption (span) to the bottom of the image while the image is responsive and also the caption with it. I think it is fairly simple but for some reason I am not able to get it right.

Any help would be appreciated!
0
Comment
Question by:Refael
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40387694
http://codepen.io/anon/pen/fxmlb

Wrap your second image in a cover-img-wrap class div
Apply the max-width to the images div container and not the image

To the img add
    width:100%;

To the anchor tag add
    display:block;

To .textCenter add
    position:absolute;
    bottom:0;

Remove .textCenter from the .row div
0
 

Author Closing Comment

by:Refael
ID: 40393003
Always, Thank you Gary :-) A little bit here and there and i got it just perfect!
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now