bootstrap grid layout doesnot arrange div from starting of row

Question

I have 4 div as follows :

<div class="col-xs-4" >
 div1
</div>

<div class="col-xs-4" >
div2
</div>

<div class="col-xs-4" >
 div3
</div>

<div class="col-xs-4" >
div4
</div>

Why does the 4th div come below div 3 instead of below div 1.

How can I modify my code so that any div after the last div of a row starts appearing from the starting of the next row?

That's because of the height problem, may you need use masonry plugins — Jishnu V S, Jan 05 '17 at 10:28
you can add the first 3 div in a row and the next in another row, it will have issue on spacing or you can use masonry as @Naila told — Gokul P P, Jan 05 '17 at 10:31
It's because of the height of the columns and has aleady been answered on SO. See http://stackoverflow.com/questions/24718039/bootstrap-gap-between-columns, http://stackoverflow.com/questions/19572753/bootstrap-3-fluid-grid-layout-issues/19573033 and http://stackoverflow.com/questions/19196082/bootstrap-how-to-stack-divs-of-different-heights Your options are to use clearfix, make columns the same height, use CSS3 columns or masonry plugin. — Carol Skelly, Jan 05 '17 at 12:56

Banzay · Answer 1 · 2017-01-05T10:40:31.917

Make additional row :

<div class="row">
    <div class="col-xs-4" >
     div1
    </div>
    <div class="col-xs-4" >
    div2
    </div>
    <div class="col-xs-4" >
     div3
    </div>
</div>
<div class="row">
    <div class="col-xs-4" >
    div4
    </div>
</div>

A row doesn't allow relatively positioned elements from out of row to overlap its content, so 4th div will be placed below and its top edge will be below of bottom edge of highest div of first row.

Pravin Vavadiya · Answer 2 · 2017-01-05T10:57:11.413

Your html code is correct if using boostrap. i think problems is some height and width issue. I suggested Please use height and width style for Div.

Use below css style property for resolved it.

width, height, max-width, min-width, max-height and min-height

Try to something like this.

   <div class="row">
    <div class="col-xs-4" >
      <div class="content">div1</div>
    </div>

    <div class="col-xs-4" >
    <div class="content">div2</div>
    </div>

    <div class="col-xs-4" >
    <div class="content">div3</div>
    </div>

    <div class="col-xs-4" >
    <div class="content">div4</div>
    </div>
  </div>

score 0 · Answer 3 · answered Jan 05 '17 at 10:37

You would need the masonry plugin in order for the divs to sit as you wish, here is a link to it: Masonry. The varying height of the divs will push them out of flow and you will see that they don't appear where you want them to. Also with Boostrap the columns in any given row need to be less than or equal to 12. In your row they are equal to 16 and being pushed into the next available space they can find.

The structure of your HTML should be:

<div class="container">
  <div class="row">
    <div class="col-xs-4">
    </div>
    <div class="col-xs-4">
    </div>
    <div class="col-xs-4">
    </div>
  </div>
</div>

If you want all the columns to have equal height I would suggest using the flexbox layout:

.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

As all your divs have varying heights (according to your picture) you would be better off with the masonry plugin.

score 0 · Answer 4 · answered Jan 05 '17 at 11:21

place all <div class="col-xs-4"></div> in row structure <div class="row"></div>

here is example:

 <div class="row">
    <div class="col-xs-4" >
     div1
    </div>
    <div class="col-xs-4" >
    div2
    </div>
    <div class="col-xs-4" >
     div3
    </div>
    <div class="col-xs-4" >
    div4
    </div>
    </div>

i think, you want

masonry Image Gallery

effect, please check below url for exact effects

http://bootsnipp.com/snippets/featured/masonry-image-gallery

bootstrap grid layout doesnot arrange div from starting of row

4 Answers4