Solved

Bootstrap image static caption

Posted on 2014-10-17
2
205 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Bootstrap 3 with accordion menu 2 44
Asp.net mvc foreach 3 33
How to create a 3-column full-width flex button layout 1 23
Alignment is not working correctly. 8 32
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

919 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

18 Experts available now in Live!

Get 1:1 Help Now