How to make equal padding in row with Bootstrap? - html

Question

I want to create equal padding with all div under the .slideshow div. The problem is the last div right padding.
Now looks like this:
I want this, just with equal padding / space between divs and equal img heights:
The code:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="product-container">
<div class="slideshow">
<p>Test message, Test message</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
</div>
</div>
</div>
CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.product-container{
padding: 0px 9%;
}
.slideshow{
background-color: #efeff1;
border: 1px solid #c5c5c7;
overflow: hidden;
}
.product-container img{
width:100%;
}
.col-lg-3{
padding-right:12px;
padding-left:0px;
}
Fiddle:
Fiddle

Answer 1

Just wrap all your image containing divs in additional .row:
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
And remove unnecessary styling:
.col-lg-3{
padding-right:12px;
padding-left:0px;
}
Also, you don't need to repeat responsive classes for all devices:
<div class="col-sm-3 col-md-3 col-lg-3"></div>
Can be written:
<div class="col-sm-3"></div>
Updated fiddle

Answer 2

Is this what you're trying to acheive?
.product-container {
padding: 0 2px 6px 2px;
overflow: hidden;
}
.slideshow {
background-color: #efeff1;
border: 1px solid #c5c5c7;
padding-left: 20px;
}
.product-container img {
width: 100%;
}
.product-container .pads {
padding: 0px 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="col-lg-12">
<div class="product-container">
<div class="row">
<div class="slideshow">
<p>Test message, Test message</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
</div>
</div>
</div>

Answer 3

I used the last-child selector. "Bla" is a class I added to the divs in question
.bla:last-child{
padding-right:0px ;
}
Had some issues with the height but used display: flex; to deal with that.
This wont work well in older browsers
http://jsfiddle.net/52VtD/12065/

Answer 4

If the right padding is removed it will have the result you are looking for.
http://jsfiddle.net/0rm0h547/light/
http://jsfiddle.net/0rm0h547/show/
css
.continuous {
padding-right: 0px;
}
html
..
<div class="col-sm-3 col-md-3 col-lg-3 continuous">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
..
Add an extra css class that removes padding-right.

Answer 5

You can give padding-right:0px; and you will get wat you want.
http://jsfiddle.net/52VtD/12070/
.col-lg-3{
padding-right:0px;
padding-left:0px;
}

Answer 6

Try:
remove
.col-lg-3{
padding-left:12px;
padding-right:0px;
}
add
.product-container .col-lg-3
{
padding-left:0px;
padding-right:0px;
}