CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
md. motailab
md. motailab

Reputation: 52

how to do like this image using bootstrap?

how to do like this image using bootstrap ? enter image description here

This is my code what is mistake in this code please help me.

 <div class="row">
     <div class="img-5">
         <div class="col-md-4">
             <div class="hn-img-1">
                 <img src="img/1.jpg" alt="">
             </div>
         </div>
         <div class="col-md-4">
             <div class="hn-img-1">
                <img src="img/2.jpg" alt="">
             </div>
         </div>
         <div class="col-md-4">
             <div class="hn-img-1">
                 <img src="img/3.jpg" alt="">
             </div>
         </div>
         <div class="col-md-4">
             <div class="hn-img-1">
                 img src="img/5.jpg" alt="">
              </div>
          </div>
          <div class="col-md-4">
             <div class="hn-img-1">
                 <img src="img/4.jpg" alt="" class="mt-top">
             </div>
          </div>
     </div>
 </div>

and result is this,

This is my code result.

enter image description here

Upvotes: 1

Views: 81

Answers (5)

sayal adhikari
sayal adhikari

Reputation: 116

Look at this image to have a basic knowledge about the grid. Use grid layout to distribute the page as per your need. bootstrap grid explained

Upvotes: 0

Aakash
Aakash

Reputation: 1515

Bootstrap has a 12 column grid system. So you should divide your grids in such a way that the sum total of the grid comes out to be 12.

The Mistake: You are using 5 div col-md-4 with 4 grids each. That means your total sum of the grid comes to be 20. But, it should be 12. In some cases sum of grids greater than 12, might just work (in using col-sm-* ). But it is strongly advised to use 12 grid system.

So what you should do is:

  1. instead of using 5 col-md-4 you should use only 3 col-md-4 (total sum of grids = 12).
  2. You should put 2 images in the first div(Left div), 1 image in the second div (Central div), and the rest 2 images in the third div (Right div).

This should do the trick. Here's the JSFiddle demo. (Since md stands for medium device, what we are communicating to our column div elements is that when the available screen space is equal to or greater than a “medium device” (992px and up) amend the widths of these elements to match the column number in the md class name. Make sure that the output window in JSFiddle is of max width to see the results, else all the images will stack under one another)

Hope it helps, let me know if you have some problem.

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281606

You can make use of nested rows to create the structure as you want. This is a sample code that can lead you to the design you want.

<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>

        </div>
    </div>
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>

        </div>
    </div>
</div>

JSFIDDLE

Upvotes: 1

Federico Blumetto
Federico Blumetto

Reputation: 977

Bootstrap divide the screen in 12 columns, you sholud have only 3 columns md-4 y one row. And in the first column put 2 images, in the middle column put the big image and in the last column the two remaining images.

Upvotes: 0

user6246296
user6246296

Reputation:

Under the you should remove because under ROW you should only use what you want to be in the grid by using classes like col-sm-* or col-md-* you also have yo use classes like .col-md-offset-* if you want empty space before the current div in the grid.

Upvotes: 0

Related Questions