Responsive Full Width Image Grid with Bootstrap

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 1

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

Answer 2

The anchor tag containing the image needs to have a width:100% and the image needs to have max-width:100% . Bootstrap has a class for responsive images .

Answer 3

Bootstrap has its margins and paddings set to its classes. You need to reset it.

for instance, if you are using fluid-container , row , and col-sm-2 and col-md-1 classes, in your css file you need to reset its margin/paddings.

.fluid-container {
    margin: 0;
    padding: 0;
}
.fluid-container row{
    margin: 0;
    padding: 0;
}
.fluid-container row col-sm-2, .fluid-container row col-md-1{
    margin: 0;
    padding: 0;
}

I strongly recommend you to use at least one differential identification from standard Bootstrap classes alongside with them to prevent messing with future grids:

.fluid-container-fullpage {
        margin: 0;
        padding: 0;
    }
    .fluid-container-fullpage row-fullpage{
        margin: 0;
        padding: 0;
    }
    .fluid-container-fullpage row-fullpage col-sm-2-fullpage, .fluid-container-fullpage row-fullpage col-md-1-fullpage{
        margin: 0;
        padding: 0;
    }

Answer 4

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 . 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;
}

Answer 5

在bootstrap 4中，已经实现了类.no-gutters-您可以使用它