CODEWITHSUNDEEP
htmltwitter-bootstrapgrid
Fearghal
Fearghal

Reputation: 11427

Bootstrap grid with varying width images

I want to create a grid with 2 columns, the first of size col-md-1 and the second with width col-md-2.

In the 1st col i have 3 rows, each with a square image. The 2nd col has 2 rows, 1st with 1 image and 2nd with 2 images.

All images used are the ame dimensions originally.

This gives me below: enter image description here

This causes me a slight issue - the gaps in the grid caused by 'col' class and the padding on the thumbnails means the bigger image is always either too big or small.

Has anybody acheived a acceptable way of acheiving this type of grid layout?

My code is as follows:

    <div class="row">
            <div class="col-md-1 col-md-offset-2"> 
                        <div class="thumbnail">
                          <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                        </div>
                        <div class="thumbnail">
                          <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                        </div>
                        <div class="thumbnail">
                          <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                        </div>
            </div>
            <div class="col-md-2">

                    <div class="col-md-12 col-padding">

                                <div class="thumbnail">
                                  <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                                </div>

                    </div>

                <div class="row">
                    <div class="col-md-6">


                            <div class="thumbnail">
                              <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                            </div>

                    </div>
                    <div class="col-md-6">


                            <div class="thumbnail">
                              <img src="img/home/photo_sq1.jpg" alt="image 1 missing" title="Image 1">
                            </div>


                    </div>
                </div>

            </div>

    </div>

Upvotes: 0

Views: 375

Answers (1)

DavidDomain
DavidDomain

Reputation: 15293

Add a class with no padding to your css like this:

.no-padding {   
    padding: 0;
}

Then use this class on the div with:

<div class="col-md-12 col-padding no-padding">
...

This should work.

You also need to add some more margin-bottom to the .thumbnail class.

.thumbnail {
    margin-bottom: 30px;
}

If needed you will want to adjust the padding using media queries.

Here is a Fiddle

Upvotes: 1

Related Questions