web
mobile
Edit these docs Rate these docs

Masonry

Bootstrap masonry

Bootstrap masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

To start working with Masonry, please see "Getting Started" tab on this page.

Note: Masonry integration is available from version 4.8.0 (released 29.04.2019).


Basic layout

Masonry layout basic option


        <div class="container-fluid">

          <h1 class="my-4 font-weight-bold">Masonry - columnWidth</h1>
        
          <div class="grid">
            <div class="grid-item"></div>
            <div class="grid-item grid-item--width2 grid-item--height2"></div>
            <div class="grid-item grid-item--height3"></div>
            <div class="grid-item grid-item--height2"></div>
            <div class="grid-item .grid-item--width2"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item grid-item--height2"></div>
            <div class="grid-item grid-item--width2 grid-item--height3"></div>
            <div class="grid-item"></div>
            <div class="grid-item grid-item--height2"></div>
            <div class="grid-item"></div>
            <div class="grid-item grid-item--width2 grid-item--height2"></div>
            <div class="grid-item grid-item--width2"></div>
            <div class="grid-item"></div>
            <div class="grid-item grid-item--height2"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item grid-item--height3"></div>
            <div class="grid-item grid-item--height2"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item grid-item--height2"></div>
          </div>
          
        </div>

      


        // Within style tags in your html file
        * { box-sizing: border-box; }

        .grid:after {
          content: '';
          display: block;
          clear: both;
        }

        .grid-item {
          width: 160px;
          height: 120px;
          float: left;
          background: #00997B;
          border: 1px solid #333;
          border-color: hsla(0, 0%, 0%, 0.5);
          border-radius: 5px;
          margin-bottom: 20px;
        }

        .grid-item--width2 { width: 340px; }
        .grid-item--width3 { width: 520px; }
        .grid-item--width4 { width: 780px; }

        .grid-item--height2 { height: 200px; }
        .grid-item--height3 { height: 260px; }
        .grid-item--height4 { height: 360px; }

      


        $('.grid').masonry({
          itemSelector: '.grid-item',
          columnWidth: 160,
          gutter: 20
        });

      

Images option

Masonry layout with images


        <div class="container-fluid">

          <h1 class="my-4 font-weight-bold">Masonry - images option</h1>
        
          <div class="grid">
            <div class="grid-sizer"></div>
            <div class="grid-item">
              <img src="https://mdbootstrap.com/img/Photos/Others/food3.jpg" />
            </div>
            <div class="grid-item">
              <img src="https://mdbootstrap.com/img/Photos/Others/image02.jpg" />
            </div>
            <div class="grid-item">
              <img src="https://mdbootstrap.com/img/Photos/Others/image002.jpg" />
            </div>
            <div class="grid-item">
              <img src="https://mdbootstrap.com/img/Photos/Others/image06.jpg" />
            </div>
            <div class="grid-item">
              <img src="https://mdbootstrap.com/img/Photos/Others/image008.jpg" />
            </div>
            <div class="grid-item">
              <img src="https://mdbootstrap.com/img/Photos/Others/image005.jpg" />
            </div>
            <div class="grid-item">
              <img src="https://mdbootstrap.com/img/Photos/Others/image010.jpg" />
            </div>
            <div class="grid-item">
              <img src="https://mdbootstrap.com/img/Photos/Others/image18.jpg" />
            </div>
            <div class="grid-item">
              <img src="https://mdbootstrap.com/img/Photos/Others/image17.jpg" />
            </div>
          </div>
          
        </div>

      


        // Within style tags in your html file
        * { box-sizing: border-box; }

        .grid:after {
          content: '';
          display: block;
          clear: both;
        }

        .grid-sizer,
        .grid-item {
          width: 33.333%;
        }
        @media (max-width: 575px) {
          .grid-sizer,
          .grid-item {
            width: 100%;
          }
        }
        @media (min-width: 576px) and (max-width: 767px) {
          .grid-sizer,
          .grid-item {
            width: 50%;
          }
        }

        /* To change the amount of columns on larger devices, uncomment the code below */

        /* @media (min-width: 768px) and (max-width: 991px) {
          .grid-sizer,
          .grid-item {
            width: 33.333%;
          }
        }
        @media (min-width: 992px) and (max-width: 1199px) {
          .grid-sizer,
          .grid-item {
            width: 25%;
          }
        }
        @media (min-width: 1200px) {
          .grid-sizer,
          .grid-item {
            width: 20%;
          }
        } */

        .grid-item {
          float: left;
        }

        .grid-item img {
          display: block;
          max-width: 100%;
        }

      


        // init Masonry
        var $grid = $('.grid').masonry({
          itemSelector: '.grid-item',
          percentPosition: true,
          columnWidth: '.grid-sizer'
        });
        
        // layout Masonry after each image loads
        $grid.imagesLoaded().progress( function() {
          $grid.masonry();
        });  
  
      

Grid option

Masonry layout with grid


        <div class="container">
  
          <h1 class="my-4 font-weight-bold">Masonry - Bootstrap 4 grid</h1>
          
          <div class="grid">
            <div class="grid-sizer col-md-3"></div>
            <div class="grid-item col-md-6 mb-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Panel title</h5>
                  <p class="card-text">Some quick example text to build on the panel title and make up the bulk of the panel's content.</p>
                  <a class="card-link">Card link</a>
                  <a class="card-link">Another link</a>
                </div>
              </div>
            </div>
            <div class="grid-item col-md-3 mb-4">
              <div class="card">
                <div class="card-body">
                  This is some text within a panel body.
                </div>
              </div>
            </div>
            <div class="grid-item col-md-3 mb-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Panel title</h5>
                  <h6 class="card-subtitle mb-2 text-muted">Panel subtitle</h6>
                  <p class="card-text">Some quick example text to build on the panel title and make up the bulk of the panel's content.</p>
                  <a href="#!" class="card-link mr-3">Card link</a>
                  <a href="#!" class="card-link ml-0">Another link</a>
                </div>
              </div>
            </div>
            <div class="grid-item col-md-6 mb-4">
              <div class="card">
                <div class="card-header">
                  Quote
                </div>
                <div class="card-body">
                  <blockquote class="blockquote mb-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                  </blockquote>
                </div>
              </div>
            </div>
            <div class="grid-item col-md-3 mb-4">
              <div class="card">
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">Cras justo odio</li>
                  <li class="list-group-item">Dapibus ac facilisis in</li>
                  <li class="list-group-item">Vestibulum at eros</li>
                </ul>
              </div>
            </div>
            <div class="grid-item col-md-3 mb-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="font-weight-bold mb-3">Panel title</h5>
                  <p class="mb-0">Some quick example text to build on the panel title and make up the bulk of the panel's content.</p>
                </div>
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">Cras justo odio</li>
                  <li class="list-group-item">Dapibus ac facilisis in</li>
                  <li class="list-group-item">Vestibulum at eros</li>
                </ul>
                <div class="card-body">
                  <a href="#!" class="card-link mr-3">Card link</a>
                  <a href="#!" class="card-link ml-0">Another link</a>
                </div>
              </div>
            </div>
            <div class="grid-item col-md-3 mb-4">
              <div class="card">
                <div class="card-header">
                  Featured
                </div>
                <div class="card-body">
                  <h5 class="card-title">Special title treatment</h5>
                  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                  <a href="#!" class="btn btn-primary btn-sm">Button</a>
                </div>
              </div>
            </div>
          </div>
          
        </div>

      


        $('.grid').masonry({
          itemSelector: '.grid-item',
          columnWidth: '.grid-sizer',
          percentPosition: true
        });

      
Edit these docs Rate these docs

Bootstrap masonry - getting started : download & setup


Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

Setup

After downloading and extracting MDB package, open index.html file.

Then, below the linked JavaScript files add masonry files.

    
      <!-- MDBootstrap Masonry  -->
<script type="text/javascript" src="js/addons/masonry.pkgd.min.js"></script>
      
<script type="text/javascript" src="js/addons/imagesloaded.pkgd.min.js"></script>
    
  

If you use the Gulp version of MDB package, these are your links:

    
      <!-- MDBootstrap Masonry  -->
<script type="text/javascript" src="dist/js/addons/masonry.pkgd.min.js"></script>
      
<script type="text/javascript" src="dist/js/addons/imagesloaded.pkgd.min.js"></script>
    
  

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue