Bootstrap default padding and margin causing images to stretch outside the container - html

Question

My images are stretching into the padding/margin that bootstrap uses to divide the columns. I want to keep the columns divided but not have the images stretch. I have been able to shrink the image using padding but then the whitespace between the columns is clickable which is not what I want.
<div id="cont_divider" class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_1">
<div class="row">
<p class="stair_image_font_style">Straight<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/straight.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_2">
<div class="row">
<p class="stair_image_font_style">Single Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/single_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_3">
<div class="row">
<p class="stair_image_font_style">Double Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/double_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_4">
<div class="row">
<p class="stair_image_font_style">Triple Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/triple_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
#inner_cont_1{
background-color: #336699;
}
#inner_cont_2{
background-color: #cc6633;
}
#inner_cont_3{
background-color: #ff6633;
}
#inner_cont_4{
background-color: #ffcc66;
}
.staircase_imgs{
box-sizing: border-box;
width: 100%;
display: block;
padding: 0 1.238em 0.3em 1.238em;
}
.stair_image_font_style{
font-size: 2em;
color: #ffffff;
line-height: 1em;
padding: 0.8em 0.938em;
margin: 0;
}
.col_divide{
margin-top: 1em;
margin-bottom: 1em;
}

Answer 1

That's because you're using .row without a .col- class. .row has negative left and right margins which will extend the content area out beyond the parent. The padding of a .col- class nullifies this affect. Remove .row.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
#inner_cont_1 {
background-color: #336699;
}
#inner_cont_2 {
background-color: #cc6633;
}
#inner_cont_3 {
background-color: #ff6633;
}
#inner_cont_4 {
background-color: #ffcc66;
}
.stair_image_font_style {
font-size: 2em;
color: #ffffff;
line-height: 1em;
padding: 0.8em 0.938em;
margin: 0;
}
.col_divide {
margin-top: 1em;
margin-bottom: 1em;
}
<div id="cont_divider" class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_1">
<p class="stair_image_font_style">Straight<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_2">
<p class="stair_image_font_style">Single Winder<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_3">
<p class="stair_image_font_style">Double Winder<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_4">
<p class="stair_image_font_style">Triple Winder<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
</div>
</div>
P.S. I also removed your .staircase_imgs class as it's not required once you remove the .row elements. I also rearranged some of your markup like a to inside the Bootstrap column element. This way the white space around the column element isn't clickable.

Answer 2

Remove the extra <div class="row"> you have. This creates margin: 0 -15px; for .col to rest in, but you do not have a -col in this .row ... so simply remove it.
Like this:
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_3">
<div class="row"> <!-- REMOVE THIS DIV -->
<p class="stair_image_font_style">Double Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/double_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>

Answer 3

First of all, you should place your a tag inside bootstrap column, in order to be inside that padding column. Second, you added unnecessary .row classes.
Your structure should be something like this:
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<div id="inner_cont_1">
<a href="#" class="image_link_styling">
<p class="stair_image_font_style">Straight<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/straight.jpg" alt="straight staircase">
</a>
</div>
</div>
</div>
</div>
I made a fiddle with your code: fiddle
Hope this helps!

Answer 4

your <a> tag starts way outside of the <img> tag. Instead of using the link over the multiple <div>'s try placing the <a> tag just around the <img> See the example below:
<div class="col-md-12">
<a href="..">
<img src="..." class="img-responsive">
</a>
</div>