Bootstrap floats divs from left to right

Question

In my project I use bootstrap.

I'm trying to show divs that float from left to right, so I did

<div class="row"> <div class="col-md-4">11111111<br></div> <div class="col-md-4">2222222222<br>222222222222<br></div> <div class="col-md-4">333333333333<br></div> <div class="col-md-4">444444444444<br></div> </div> 

http://www.bootply.com/yyKS8cgS4h

But as you can see, a div with 4s is not added under a div with 1s, but under a div with 3s. How can I fix it so that it is added under divs with 1s?

Edit

The number of divs is dynamic, so I can’t just add it to div 11111, what I want is something like on the pinterest.com home page, where all divs are added from left to right and there are large spaces under each div

To better understand my problem, I made another example.

http://www.bootply.com/R3MXHJL9wM

This is what I want to do, fill the page with images with a description. But I want the page to be filled without huge spaces like the ones you see in the example.

For example, divs of divs of images are under each other without spaces under them (which you get if you just create a new line)

Answer 1

For those with the same problem, I suggest using resets the column

With the four levels of available grids, you will certainly encounter problems where at certain breakpoints your columns are not entirely correct, since one is higher than the other. To fix this, use a combination of .clearfix and our responsive utility classes.

Answer 2

You should read the grid section from Twitter Bootstrap:

Column grids are created by specifying the number of available twelve columns that you want to expand. If more than 12 columns are placed in one row, each group of additional columns will, as one block, be transferred to a new row.

So, after every 12 columns, you should start a new row with a new <div class="row"> .

Take a look at the official official example .

So, if you want to add 4s under the div with 1s, your snippet should be:

 <div class="row"> <div class="col-md-4">11111111<br></div> <div class="col-md-4">2222222222<br>222222222222<br></div> <div class="col-md-4">333333333333<br></div> </div> <div class="row> <div class="col-md-4">444444444444<br></div> </div> 

http://www.bootply.com/HbFGma5nI0

In your second snippet, you should extend the Bootstrap grid system with the thumbnail component to easily display grids of images, video, text, etc.

 <div class="col-md-4"> <div class="thumbnail"> <img src="http://placehold.it/350X350" class="img-responsive"> <div class="caption"> <p>11111111111111111</p> </div> </div> </div> 

http://www.bootply.com/QKZBKM3NmO

Answer 3

If you look at the pinterest.com homepage , you will find out that each section gets a top and left property. I think they calculate and set the top and left property.

This is just an approach to get your desired look.

Instead of having one row and adding all divs inside, you can have x columns in that row and programmatically add divs in each column.

EX: Let's say I set 4 columns x1, x2, x3 and x4 and had about 9 divs. I started the loop so that divs were added in this order: d1 → x1, d2-> x2, d3-> x3, d4-> x4, d5-> x1 ..... and so on.

Check out the code below. I used an array for heights to show that this works for different heights.

 var arr = [100, 200, 300, 400, 200, 100, 300, 500]; var colors = ["red","green","blue", "yellow","golden", "orange", "maroon"] var divs = 13; for (var i = 0; i < divs; i++) { var ht = arr[Math.floor(Math.random() * arr.length)]; var clr = colors[Math.floor(Math.random() * colors.length)]; var rem = i%4; $("#wrapper .box"+rem).append("<div >random text</div>"); $(".box"+rem+" div:last").css({ "height": ht + "px", "background":clr+"" }); } 

Fiddle

Note: The js code to add will depend on your code for generating the div. I just used this demo.

Answer 4

If you are using bootstrap 3, you should have 12 columns. Try the following:

 <div class="row"> <div class="col-md-3">11111111<br></div> <div class="col-md-3">2222222222<br>222222222222<br></div> <div class="col-md-3">333333333333<br></div> <div class="col-md-3">444444444444<br></div> </div> 

See the Bootstrap document .

Answer 5

Use the Freemasonry plugin, get it from here - https://masonry.desandro.com/

Answer 6

The problem you see with a floating point column is how reacting columns reset when they have different heights.

As shown at http://getbootstrap.com/css/#grid-responsive-resets , you may need to manually clear the columns so that their position can be recounted. Adding <div class="clearfix"></div> will enumerate the columns following it. If you intend to have 3 columns and have a new row starting with every fourth, you can include this div after every third element.

eg:

 <div class="row"> <div class="col-md-4">11111111<br></div> <div class="col-md-4">2222222222<br>222222222222<br></div> <div class="col-md-4">333333333333<br></div> <div class="clearfix"></div> <div class="col-md-4">444444444444<br></div> <div class="col-md-4">5555555555555<br></div> </div> 

column 4 is now correctly displayed under column 1, but not IMMEDIATELY below; instead, it is correctly aligned for column 5, which appears under column 2, but all rows will have the same initial height.

In this example, I expanded the example a bit: http://www.bootply.com/NriYjz0OAl

And to demonstrate this with your other example: http://www.bootply.com/oZz9zoFiqe

There seems to be no way to eliminate the space in each line without manually calculating the heights of each div, as shown in another answer.

Answer 7

Twitter Bootstrap uses 12 Grid columns for mobile, tablet and desktop. Thus, you cannot use col-md-4 four times, it will be only 16. Thus, you need to split the screen accordingly. This can help you understand the div structure from here.

Answer 8

To achieve the structure required with boostrap:

 <div class="row"> <div class="col-md-4">11111111<br></div> <div class="col-md-4">2222222222<br>222222222222<br></div> <div class="col-md-4">333333333333<br></div> </div> <div class="row"> <div class="col-md-4">444444444444<br></div> </div> 

You could something like (PHPish (no so) pseudocode):

 $values = get_values(); $html = '<div class="row">'; foreach($values as $idx => $v){ $html .= "<div class='col-md-4'>$v</div>"; $html .= ($idx + 1) % 3 ? '' : '<div class="row"></div>'; } $html = .= '</div>'; echo $html; 

Answer 9

You can use JavaScript to repeat all cells and get each height. Then we calculate the most optimal distribution. After that, you can move the cells to 3 large columns or set the absolute position of the cells and set the upper left coordinates using JavaScript. The downside is that you need all the content to load into the browser before you run this JavaScript.

Another option is to set a fixed height for all cells (I did this in similar cases). Especially if the title consists of only one or two lines. You can use CSS ellipsis to truncate long names in a somewhat acceptable way.