CODEWITHSUNDEEP
twitter-bootstrap
Sven van den Boogaart
Sven van den Boogaart

Reputation: 12331

Bootstrap float divs left to right

For my project i am using bootstrap.

I am trying to show divs that float from left to right so i made

<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 see the div with the 4s is not added under the div with the 1s but under the div with the 3s. How can i fix it so that it will be added under the divs with the 1s ?

Edit

The numbers of divs is dynamic so i cant just add it to div 11111, what i want is something like on the pinterest.com homepage where all the divs are added from left to right and there are nog big spaces under every div

To understand my problem better i made another example.

http://www.bootply.com/R3MXHJL9wM

This is what i want to do, fill the page with images with a discription under it. But i want the page to be filled without the huge gaps like the ones you see in the example.

enter image description here

An example, the images divs are under each other with no gaps under them (which you get if you just make a new row)

Upvotes: 5

Views: 12532

Answers (9)

Shree
Shree

Reputation: 303

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

Upvotes: 1

anpsmn
anpsmn

Reputation: 7257

If you look at the pinterest.com Home Page then you will find out that each sections is getting a top and left property. I guess they calculate and set top and left property.

This is just an approach to get the 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: Say I have set 4 columns x1, x2, x3 and x4 and have around 9 divs. I will run a loop so that the divs are appended in this order d1 -> x1, d2-> x2, d3-> x3, d4-> x4, d5->x1 ..... so on.

Check below code. I have used an array for heights just to show this works for varied 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 for appending would be taken care by your code behind generating the divs. I have just used for this demo.

Upvotes: 2

Sven van den Boogaart
Sven van den Boogaart

Reputation: 12331

For anyone with the same problem i suggest using column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

Upvotes: 2

Taco Jan Osinga
Taco Jan Osinga

Reputation: 3880

You could use JavaScript to iterate through all cells and get each height. Then calculate te most optimal distribution. After that you could move the cells into 3 large columns, or set the position of the cells to absolute and set the top-left coordinates with JavaScript. Downside is that you need all content to be loaded into the browser before running this JavaScript.

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

Upvotes: -1

Jarek.D
Jarek.D

Reputation: 1294

To achieve a structure required by 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 might so 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;

Upvotes: -1

Pier-Alexandre Bouchard
Pier-Alexandre Bouchard

Reputation: 5245

You should read the grid section from Twitter Bootstrap:

Grid columns are created by specifying the number of twelve available columns you wish to span. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

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

Take a look to this official example.

So, if you want to add the 4s under the div with the 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 Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

<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

Upvotes: 3

Claies
Claies

Reputation: 22323

The issue you are seeing with the column floats is related to the way that the responsive columns reset when they are different heights.

As illustrated on http://getbootstrap.com/css/#grid-responsive-resets, you may have to manually clear the columns so that their position can be re-calculated. Adding a <div class="clearfix"></div> will allow columns following it to be re-calculated. If your intent is to have 3 columns, and have a new row starting with every 4th, you can include this div after every 3rd element.

for example:

<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 now correctly appears below column 1, but not IMMEDIATELY below; instead, it is lined up correctly for column 5 to appear below column 2, while still allowing the entire row to be at the same starting height.

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

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

There doesn't seem to be a way to eliminate the gap in each row without manually calculating the heights of each div, as shown in another answer.

Upvotes: 0

UtkarshBhavsar
UtkarshBhavsar

Reputation: 259

Twitter Bootstrap is using 12 columns Grid system for mobile, tablet, and desktop. So You can not use col-md-4 four times it will make total 16. So you need to divide screen accordingly. This might help you to understand div structure from here

Upvotes: -1

Louis D.
Louis D.

Reputation: 464

If you use bootstrap 3, you must have 12 columns. Try this:

<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 doc.

Upvotes: 1

Related Questions