Bootstrap template allows text to overlay photo - html

Question

I'm trying to troubleshoot an issue with using a bootstrap template for mobile...
I never want the text to overlay over an image, however I can't seem to find any straight answer on how to avoid it happening.
Here is the code currently:
<div class="banner-bottom" id="photos">
<div class="container">
<div class="bottom-grids">
<div class="col-md-3 bottom-grid">
<img src="images/bed.jpg" height="200px">
</div>
<div class="col-md-3 bottom-grid">
<p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p>
</div>
<div class="col-md-3 bottom-grid">
<img src="images/entry.jpg" height="200px">
</div>
<div class="col-md-3 bottom-grid">
<p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
There is nothing tricky in the CSS -- typical bootstrap 25% width for col-md-3.
.col-md-3 {
width: 25%;
}
How can I make my text areas well defined enough so they don't overlay my images? I would assume setting each div as col-md-3 with a 25% width would be enough to avoid this issue, but I'm obviously missing something.

Answer 1

You should use col-** classes only inside row class elements. col-** classes are floated items and row class has all needed clearfix styles and negative margins. Something like this:
<div class="banner-bottom" id="photos">
<div class="container">
<div class="row bottom-grids">
<div class="col-md-3 col-sm-3 bottom-grid">
<img src="images/bed.jpg" height="200px">
</div>
<div class="col-md-3 col-sm-3 bottom-grid">
<p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p>
</div>
<div class="col-md-3 col-sm-3 bottom-grid">
<img src="images/entry.jpg" height="200px">
</div>
<div class="col-md-3 col-sm-3 bottom-grid">
<p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
Also, bootstrap does lots of work for you and I'm sure you do not need those .bottom-grid classes and class="clearfix" div over there. Keep it as much simple as you can and you will see you markup improving.
One more thing is giving your img elements max-width: 100%; height: auto;, cause now they are overlapping their parent col- containers.

Answer 2

Try making use of "row" class and for smaller screen use "col-sm-*" based on your need to display.
This is just a sample edit to help you start with something:
<div class="banner-bottom" id="photos">
<div class="container">
<div class="row bottom-grids">
<div class="col-md-3 col-sm-3 bottom-grid">
<img src="images/bed.jpg" height="200px">
</div>
<div class="col-md-3 col-sm-3 bottom-grid">
<p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p>
</div>
<div class="col-md-3 col-sm-3 bottom-grid">
<img src="images/entry.jpg" height="200px">
</div>
<div class="col-md-3 col-sm-3 bottom-grid">
<p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p>
</div>
<div class="clearfix"></div>
</div>
</div>

Answer 3

Please do add class="img-responsive" to img tag as below
Do not set height to img tag.
<div class="banner-bottom" id="photos">
<div class="container">
<div class="bottom-grids">
<div class="col-md-3 bottom-grid">
<img class="img-responsive" src="images/bed.jpg">
</div>
<div class="col-md-3 bottom-grid">
<p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p>
</div>
<div class="col-md-3 bottom-grid">
<img class="img-responsive" src="images/entry.jpg">
</div>
<div class="col-md-3 bottom-grid">
<p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>