Question: I am looking to replicate this effect in bootstrap.
<http://tympanus.net/codrops/2013/04/17/responsive-full-width-grid/>

I have been using a fluid container with different combinations of col-lg,col-md,col-xs,col-sm

but am having issues getting the images to fill in the entire width of the window. They either leave to much space inbetween images or overlap one another. 

Any help in the right direction would be much appreciated. Thanks!

Answer: 
I think the simplest way is to remove the gutter around the columns, then use the Bootstrap `col-*-*` to layout the responsive image grid..

```
/* remove spacing between columns */
.row.no-gutter [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

```

<http://codeply.com/go/KoZilXlyin>
The best way to achieve 100% width for the grid columns is by overriding the implicit padding provided by the **.col-\*** classes of bootstrap grid. Based upon the example link provided in the question I have created a [Plunker](http://plnkr.co/edit/BgV43cJyqKULTLaZ5jX0?p=preview). This is just a sample and you can modify it based on your requirements. I have used **col-sm-** because for normal screens the grid columns are aligned horizontally and when the screen size is *< 768px* then it stacks vertically. Hope this helps.

HTML:

```
<div class="col-sm-3 col-width">
    <div class="cuadro_intro_hover" style="background-color:#cccccc;">
        <p style="text-align:center; margin-top:20px;">
            <img src="http://placehold.it/500x330" class="img-responsive" alt="">
        </p>
        <div class="caption">
            <div class="blur"></div>
            <div class="caption-text">
                <h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">Felix Cat</h3>
            </div>
        </div>
    </div>
</div>

```

CSS:

```
.col-width {
    padding-right:0 !important;
    padding-left:0 !important;
    border: 1px solid;
}

```