logo
image
Timotheus Bendan
Sales Manager
Profile Inbox Settings Logout
Card Masonry
  • Shopping Cart
    ...
    Digital clock
    1 x $1.190,90
    ...
    Toy Car
    1 x $139.58
    ...
    Sunglasses
    2 x $50,90
    ...
    Cake
    1 x $10,50
    Sub Total : $1.442,78

Integrate Masonry with the Bootstrap grid system and cards component.

Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:

Usage

To use the plugin, you need to add the following files.

<!-- Javascript -->
<script src="libs/masonry.pkgd.min.js"></script>

By adding data-masonry='{"percentPosition": true }' to the .row wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores aspernatur atque aut corporis delectus iure unde voluptas. Doloribus, veniam.
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio esse quia quo. Cupiditate delectus dolorum hic nihil quidem quis.
<div class="row" data-masonry='{"percentPosition": true }'>
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-body">...</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-body">...</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-body">...</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-body">...</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-body">...</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-body">...</div>
        </div>
    </div>
</div>