Boostrap's column's padding constrain in css - css

Question

demo here http://www.bootply.com/stuqpDhmWp
As you can see in above demo, my img is 100% but the padding between the img is too big because left and right total is 30px. I wish it could be like the side which is 15px only. Any hack on that?

Answer 1

.container .col-md-3{ padding:0px 7.5px}
.container .col-md-3:first-child {padding-left:15px;}
.container .col-md-3:last-child {padding-right:15px;}
it will fix your problem

Answer 2

Try this:
To avoid padding use row in particular col
DEMO
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3">
<img src="http://i.imgur.com/NRAVLP1.png">
</div>
<div class="col-lg-3 col-md-3 row">
<img src="http://i.imgur.com/NRAVLP1.png">
</div>
<div class="col-lg-3 col-md-3 ">
<img src="http://i.imgur.com/NRAVLP1.png">
</div>
<div class="col-lg-3 col-md-3 row">
<img src="http://i.imgur.com/NRAVLP1.png">
</div>
</div>
</div>

Answer 3

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-padding">
<img src="http://i.imgur.com/NRAVLP1.png">
</div>
<div class="col-lg-3 col-md-3 col-padding">
<img src="http://i.imgur.com/NRAVLP1.png">
</div>
<div class="col-lg-3 col-md-3 col-padding">
<img src="http://i.imgur.com/NRAVLP1.png">
</div >
<div class="col-lg-3 col-md-3 col-padding">
<img src="http://i.imgur.com/NRAVLP1.png">
</div>
</div>
</div>
css:
.col-padding{padding-right: 0}
.col-padding:last-child{padding-right: 15px}