HOW-TO: Get Masonry Views working with Bootstrap design

Works great (on jQuery 2.1 as well), thanks for sharing!

I replaced the values from step one ("Row class") with a token. This allows me to assign a double or triple column value for some items such as this:

Assigning double and triple width to columns

1. Add an extra selection field (called "Columns" for instance) on the content type which allows the user to select one of the following options (depending on how many columns your grid consists of by default; all the following numbers are based on a 3-column grid, such as displayed above):
   • 2-columns col-xs-12 col-sm-12 col-md-8 col-lg-8
   • 3-columns col-xs-12 col-sm-12 col-md-12 col-lg-12
     -> Make sure to make this field not required (so the option "none" is available as well)
2. In the view, add the field "Columns" you just created
   • Exclude it from display
   • Style settings: uncheck "Add default classes"
   • Add the following in the No results behaviour of this field: col-xs-12 col-sm-6 col-md-4 col-lg-4 (these are the default values of step 1 in the OP)
   • Uncheck "Hide if empty" and "Hide rewriting if empty"
3. Add the token of this field in the "Row class" field of the Masonry Views settings, which would be [field_columns] in this case.
4. Last but not least fill out the columnWith field in the Masonry View settings with the following selector: .col-lg-4 (don't forget the dot)

EDIT: As of Views 7.x-3.14 there's a bug that sticks the CSS-classes together (by replacing spaces with dashes). A patch has been provided though.

Hi All,

Also wanted to chime in how this can work. I spent 4 hours wrapping my head around this and trying to figure out how to do it within a responsive framework and to have items of different sizes.

NOTE: I am not using bootstrap—just Drupal 7, Views 3, Masonry API 3.0-Beta1, and Masonry Views 3.0

STEPS:

Install:
1. Enable Masonry_Views (which will enabled Masonry API).
2. Add in the Masonry JS Plugin http://masonry.desandro.com/ and rename to this "sites/../libraries/masonry/masonry.pkgd.min.js
3. Add Images Loaded http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js and rename to "sites/../libraries/imagesloaded/imagesloaded.pkgd.min.js
4. Clear Cache
5. Check sites/reports/status report to make sure the masonry plugin is detected.

Setup:
1. Create your view with whatever content you want to show in each row (masonry-item).
2. Switch your view format to "Masonry". If you did the install correctly, you should see some masonry settings. Otherwise you will probably get a message for an undetected plugin.
3. Ignore the masonry row-class for now.
4. Set the masonry column-width to .col-lg-4 (as noted above). This will set the column width to be one view-row wide. We'll set the actual width in css.
5. Set the column width radio button to "css selector". This lets us define the columnd with so we can make it responsive.
6. Ignore the gutter width (set in css).
7. Set it to be responsive and choose whether or not you want it animated.
8. Select load images first.
9. !!! important !!!! Do not set it to fit-width. This setting was confusing my output and was causing me to end up with overlapping column rows and large gaps. We'll do all the sizing and fitting in css.
10. Set your Masonry Row class to: col-xs-12 col-sm-6 col-md-4 col-lg-4 (this set all masonry rows to the same width—recommended start for making sure this is working).

Theming:
1. Set your parent width for the view.
2. Set your view row width to be whatever you want by following this example:
.views-row.col-lg-4{
margin: .5% 2% 2%;
padding: 0;
border: none;
background: none;
width: 46%;
}
NOTE: This sets a two column masonry grid with all views-rows the same width (46% with 2% margin as gutter on each side). It also removes the default background and border.
3. Set your break points to match your responsive needs. Example (1 column on mobile, two column on tablets, four column on desktops):
.views-row.col-lg-4{
margin: .5% 2% 2%;
padding: 0;
border: none;
background: none;
width: 96%;
}
@breakpoint tab (however you set your breakpoints or media queries).
.views-row.col-lg-4{
margin: .5% 2% 2%;
padding: 0;
border: none;
background: none;
width: 46%;
}
@breakpoint desk
.views-row.col-lg-4{
margin: .5% 2% 2%;
padding: 0;
border: none;
background: none;
width: 21%;
}

////// Setting different column-widths on different elements //////
As noted above the key is to get the proper class on the proper rows. In my case I wanted only the first item to be two columns and all else to be one column.
1. Set your condition that defines what get whats class. You can set up a column selector like above. You can set a views-conditional to say that anything with a certain field (like a featured image, or anything that is promoted to front) will be x-columns wide. In my case, I used the global views result counter and set up a conditional to single out the first result.
2. Views-conditional:
If [counter] == 1, then output col-xs-12 col-sm-12 col-md-8 col-lg-8, otherwise output col-xs-12 col-sm-6 col-md-4 col-lg-4
3. Use the token [views_conditional] as your masonry row class.
4. Adjust theming so that:
@breakpoint desk
.views-row.col-lg-4{
margin: .5% 2% 2%;
padding: 0;
border: none;
background: none;
width: 21%;
}
.views-row.col-lg-8{
margin: .5% 2% 2%;
padding: 0;
border: none;
background: none;
width: 46%;
}
4. Bring that theming across your responsive breakpoints.

As noted above, if you are using a select field on your node for the column settings, you can set the key to the proper column widths:
col-xs-12 col-sm-6 col-md-4 col-lg-4
col-xs-12 col-sm-6 col-md-8 col-lg-8
col-xs-12 col-sm-6 col-md-12 col-lg-12,
etc.
and insert that field into the view (hidden and using key as format) and use its token as the Masonry Row class.

Hope this helps someone else. This a really cool module with a lot of applications. It also plays really well with gd_infinite_scroll.

Hi ec-adam !

You did this on the 7.x or 8.x branch ?
Regarding your experience with this, is there something you would advice me to do differently in this module to help others with there theming ?

This was super helpful. All the comments too.

I'm working with bootstrap sub theme and i'm stuck at: "Masonry Views Fields, Content: Image" because I can't edit the field in views. I don't get the usual popup for fields. Does someone get that weird behaviour? If i change the Views format to anything else, it starts working well again. I tried updating all concerned modules to their latest version but it still buggy.

I followed the steps described in the post and it worked perfectly on my D8 sites, for both teaser and image content types. Thanks!
Note that I had to use the 8.x-1.x-dev version, as the 8.x-1.0-rc2 had some hard-coded css that forced 3-column-only.

Thanks for these tricks.

I implemented the shawnrosspeters and knalstaaf solutions. It didn't work at first, because of the Mansory View css. It adds a margin that avoid two blocks (1 col + 2 cols) to fit in the width (3 cols). I did the following to manage it to work:

In the view, I added a surrounding div to all the fields, so that I have a kind of "inner container" div. I did this with two custom html fields (Global: Custom text), the first at top containing <div> and the second at bottom containing </div>. Maybe there is a better solution to do that.

Fields
div
Content: Title
Content: Body
Content: Size
/div

Then in my css I added:

.masonry-item { /* inactivate the default settings of the plugin */
    margin: 0;
    background: none;
    border: none;
}
.masonry-item > div { /* settings of the inner container */
    padding: 16px; /* add a custom padding that is independent of the bootstrap padding */
    background-color: #f6f6f2;
} 

Now my blocks fit well.

Hope it helps,
J.

Was experiencing some margin issues. I used Jej solution #12 it worked perfectly well. Thanks

The example site is no longer available. Does anyone have a working example that could replace it?

"The following is instructions to get a masonry grid working with Bootstrap v3. For a working example, visit: http://www.jennapeters.com/headshots"

Do you have to use Bootstrap 3? 4 uses Flexbox which will give you equal width columns then you can use the cards component with a .cards-columns container which is basically a css column count. You can use Bootstrap 3 though if you want. Just use flexbox and column count on your own. I'm setting us up where I work a Masonary grid right now and there are a bunch of different ways to spin it and get the job done. I'm first going the Bootstrap 4 route but that will only be temporary. Masonary using column count to me is just to basic and boring. Its sort of a half ass masonary effect.

Any one has a working configuration for Drupal 9.4 & & bootstrap_barrio 8.x-4.33 & masonry_views 8.x-1.1?