0

I am new to Bootstrap and want to make a Image gallery. How I expect is

enter image description here

But I am getting it like this:

enter image description here

My HTML code is this:

<div class="row">
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="img/sell/5.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                    <div class="col-md-8">
                        <div class="col-md-12">
                            <a href="#" class="thumbnail">
                                <img src="img/slider/slider-1.jpg" class="img-responsive" alt="...">
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="#" class="thumbnail">
                                <img src="img/sell/5.jpg" class="img-responsive" alt="...">
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="#" class="thumbnail">
                                <img src="img/sell/5.jpg" class="img-responsive" alt="...">
                            </a>
                        </div>
</div>

Please tell how to write the correct code.

Aman
  • 979
  • 3
  • 10
  • 23
  • You are getting it correctly, the only difference is, in your expectation the height of the image on the left is equal to the height of the pictures on the right. It would be better to use sub rows for the right column though. – Muhammad Ali Jul 23 '16 at 08:47
  • Thanks for your reply. I don't know about sub rows ... can you please tell how to use them. – Aman Jul 23 '16 at 08:48
  • Not needed here. But if you intend on splitting the right column into rows, you can have class "row" within "col"s. – Muhammad Ali Jul 23 '16 at 08:50
  • I already tried that but it was again not coming correct. So I changed to it. – Aman Jul 23 '16 at 08:54
  • Can you post a fiddle? – Muhammad Ali Jul 23 '16 at 08:57
  • Right now it wont be possible. Sorry – Aman Jul 23 '16 at 09:01
  • I saw in expected one they are using rowspan. But when I am using it in my page it's not working. Please tell if rowspan can be used and how to use it. – Aman Jul 23 '16 at 09:08
  • rowspan applies to table view. If there are 2 rows in a table, and you give rowspan of 2 to a column, that column stretches to 2 rows. It would be better if you can post a simple fiddle and someone can fix that. – Muhammad Ali Jul 23 '16 at 09:11

1 Answers1

0

You have the correct code. The difference is, your left image is just not equal is height to the right images.

In the expectation example, the left image is equal to the height of the 2 rows of images on the right. Using a longer image on the right will fix it (or giving the left column more wider column space).

Muhammad Ali
  • 668
  • 1
  • 9
  • 24