DovesandChicks DovesandChicks - 26 days ago 15
CSS Question

Bootstrap Columns Overlap when resizing

I realise this is a common problem but I've checked the issues raised in other similar questions and not found the answer

<div class="container">
<div class="row">

<div class="col-xs-12 col-sm-12 col-md-6">
<img style="width: 550px; height: 370px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<h2>Big Title Here</h2>
<p>Text in sentances here. Text in sentances here. Text in sentances here.</p>
<p>Text in sentances here. Text in sentances here. Text in sentances here.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<img style="padding: 5px; width: 150px; height: 120px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
<img style="padding: 5px; width: 150px; height: 120px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
<img style="padding: 5px; width: 150px; height: 120px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<h2>Subtitle 1</h2>
<p>Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. </p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<h2>Subtitle 2</h2>
<p>Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here.</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more »</a>
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<h2>Subtitle 3</h2>
<p>Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more »</a>
</p>
</div>
</div>
</div>


I have created a Bootply sample here, if you reduce the width the text overlaps the image.

My md columns add up to 12 and I haven't mixed up sm and md.

Any suggestions?

Answer

The problem is not with the bootstrap columns but with the image inside the column. Image should have a property of:

max-width: 100%;
height: auto;

in order for it to resize on smaller screens, otherwise it just goes beyond the column width.