Responsive Masonry/Pinterest Like Grid Layout For Bootstrap 4/3

Responsive Masonry/Pinterest Like Grid Layout For Bootstrap 4/3
File Size: 9.03 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The bootstrap.masonry.js jQuery plugin transforms the regular Bootstrap 4 or Bootstrap 3 grid system into a responsive, fluid grid layout similar to the Pinterest or Masonry.

How to use it:

1. Include the needed jQuery JavaScript library and Bootstrap 4 or Bootstrap 3 framework on the webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

2. Load the bootstrap.masonry.js script after jQuery library.

<script src="bootstrap.masonry.min.js"></script>

3. Create a Bootstrap grid system with the following attributes:

  • data-target: the selector of grid items
  • data-col-xs: the number of columns on extra small devices (phones)
  • data-col-sm: the number of columns on small devices (tablets)
  • data-col-md: the number of columns on medium devices (desktops)
<div class="row masonry" 
     data-target=".item" 
     data-col-xs="12" 
     data-col-sm="4" 
     data-col-md="3">
  <div class="col-xs-12 col-sm-4 col-md-3">
    <div class="item">
      Item 1
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-3">
    <div class="item">
      Item 2
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-3">
    <div class="item">
      Item 3
    </div>
  </div>
  ...
</div>

4. Enable the Masonry/Pinterest layout by calling the function on the top container.

$(function() {
  $('.masonry').masonry();
});

Change log:

2018-04-29

  • Updated for Bootstrap 4

This awesome jQuery plugin is developed by gustavoconci. For more Advanced Usages, please check the demo page or visit the official website.