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>

NickyTheWrench · Accepted Answer · 2016-09-04T20:57:09.530

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

For some images, the alignment isn't working. How can I fix this? You can see an example here; https://jsfiddle.net/ovuncuzun/u65qx59w/1/ — nanokozmos, Jan 04 '17 at 21:40
It's because The Godfather image is a different size then the other 3 images. The Godfather image is 640px by 634px, while the other 3 are 640px by 640px. — NickyTheWrench, Jan 05 '17 at 05:11
These images are coming randomly. Can I change all images as 640px by 640px although they aren't on runtime? I am using AngularJS. Thanks — nanokozmos, Jan 05 '17 at 11:06
I suggest asking a new question on this site describing what your new problem is! — NickyTheWrench, Jan 06 '17 at 16:23

Bootstrap Responsive Image Grid

1 Answers1