How can I create disorganized bootstrap columns?

Question

How can I create disorganized bootstrap columns?

Navigation

#1 by (6 votes)

5

I would like to create something like this: link

But I would like to create it using bootstrap to make it responsive, the problem is that the columns have different sizes and do not go linear like when you work the columns in bootstrap , how can I do this?

My Intent: link

html css bootstrap

asked by David Bazzinga Juggling 06.02.2016 в 13:36

source

1 answer

How to validate special characters in a text field Context this in an Object

score 6 · Accepted Answer

As far as I know, in boostrap is not possible with pure css. At some point in the documentation it says something like this:

If you're looking to present Pinterest-style miniature pictures, where are you are of different heights and / or widths, you will have to use a plugin from third parties, such as: Masonry , Isotope or Salvattore .

Since you have different dimensions in the images you leave an example using Masonry , is a library to make grillas that self-organize. Here you have an example made with this library.

To use Masonry in your fiddle you must:

Include JQuery and Masonry:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.js"></script>

Initialize the grid:

<script>
$('.grid').masonry({
  // options
  itemSelector: '.grid-item'
});
</script>

Here I modified your fiddle: link