Bootstrap Responsive Image Grid

Question

I want to create a responsive image grid with Bootstrap. I have 4 images and I need 1x4 grid for desktop size and 2x2 grid for mobile size. I tried the following code, but there are unnecessary blanks between images for desktop size. Also there isn't any space for mobile size. How can I adjust this layout?

Thanks in advance

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
    </div>
</div>

Answer 1

The columns in bootstrap have padding on them. I would add a class to your <div class="row"> and remove the padding to the columns via css.

Like this:

<div class="container">
    <div class="row imagetiles">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive">
        </div>
    </div>
</div>

    <style>
  div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
  padding: 0px;
}
    </style>

JsFiddle Demo

That takes care of the space on desktop. You can adjust this space between the images by adjusting the padding on the columns via CSS. For mobile devices - just use media queries. Bootstrap has the following queries:

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}

Example:

    @media(max-width: 480px){
div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
      padding: 5px;}
}