I've come across similar questions here, but none of the suggested solutions have worked for me. (I attempted making the image a background as recommended on how to display text over an image in Bootstrap 3.1, but it didn't seem to be effective)
My goal is to overlay text on top of an image using Twitter's Bootstrap.
I'm currently using the thumbnail class because it automatically resizes the image to fit a column. However, I haven't found a satisfactory way to center the text on the image.
Here's a screenshot of the current page layout: https://i.stack.imgur.com/GR9uQ.jpg
Below is the code snippet in question:
<div class="menuphotos">
<div class="container">
<h2> Lorem Ipsum</h2>
<p>Bal Bla Bla Bla </p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="http://imgur.com/4uEiK33.jpg"></a>
<div class="h2 strong">Geology and Geophysics</div>
<p> Bla Bla Bla</p>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="http://imgur.com/U5IO8eV.jpg"></a>
<div class="h2 strong">Astronomy</div>
<p> Bla Bla Bla</p>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="http://imgur.com/OZ5C3Wy.jpg"></a>
<div class="h2 strong">Etc</div>
<p> Bla Bla Bla</p>
</div>
</div>
</div>
</h2>
</div>
and
.menuphotos{
background-color: #efefef;
border-bottom: 1px solid #dbdbdb
}
.menuphotos h2 {
color: #393c3d;
font-size: 24px;
}
.menuphotos p {
font-size: 15px;
margin-bottom: 13px;
}
You can view the full code here: http://pastebin.com/ghYwGPg1 (HTML) and here: http://pastebin.com/EgjywRr9 (CSS)
If it's not feasible to centrally position text on top of the image with the thumbnail class, what alternative approach can I take to ensure the image auto-resizes to fit the column? The images I'm using are all different sizes but share the same aspect ratio (2:3).