CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3
Nick ONeill
Nick ONeill

Reputation: 7381

How to make bootstrap columns divs float/not clear other divs

The current HTML is as follows:

<div class="container">
   <div class="wrapper">
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
   </div>
</div>

However as you can see, occasionally the divs don't float up against the divs above them. What's the best approach to make these just snap into columns?

enter image description here

Upvotes: 0

Views: 148

Answers (1)

APAD1
APAD1

Reputation: 13666

The sort of layout you are describing is often referred to as the "Pinterest layout" or the "Masonry layout." Bootstrap, out of the box, is not built for this. I would suggest using the Masonry library to create this layout, but if you are set on using Bootstrap, there is a CSS3 solution to make Bootstrap behave this way here. Note that if you use the Bootstrap solution, it requires CSS3 properties that are not supported by older browsers.

Essentially, it uses the column-width and column-gap properties to set up the columns rather than the CSS styles bundled with Bootstrap.

Upvotes: 1

Related Questions