<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card mb-0">
            <img class="card-img-top img-fluid" src="assets/images/small/img-1.png" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title mb-2">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
            </div>
        </div><!-- end card -->
    </div><!-- end col -->
    <div class="col-xl-3 col-md-6">
        <div class="card mb-0">
                <img class="card-img-top img-fluid" src="assets/images/small/img-2.png" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title mb-2">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card'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>
            </ul>
            <div class="card-body">
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
        </div><!-- end card -->
    </div><!-- end col -->
    <div class="col-xl-3 col-md-6">
        <div class="card">
            <img class="card-img-top img-fluid" src="assets/images/small/img-3.png" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div><!-- end card -->
    </div><!-- end col -->
    <div class="col-xl-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-2">Card title</h4>
                <h6 class="card-subtitle font-14 text-muted">Support card subtitle</h6>
            </div>
            <img class="img-fluid" src="assets/images/small/img-4.png" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
        </div><!-- end card -->
    </div><!-- end col -->
</div><!-- end row -->

<div class="row">
    <div class="col-md-6">
        <div class="card card-body mb-0">
            <h3 class="card-title mb-1">Special title treatment</h3>
            <p class="card-text">With supporting text below as a natural lead-in to additional
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div><!-- end col -->
    <div class="col-md-6">
        <div class="card card-body mb-0">
            <h3 class="card-title mb-1">Special title treatment</h3>
            <p class="card-text">With supporting text below as a natural lead-in to additional
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div><!-- end col -->
</div><!-- end row -->

<div class="row">
    <div class="col-lg-4">
        <div class="card card-body mb-lg-0">
            <h4 class="card-title mb-1">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div><!-- end col -->
    <div class="col-lg-4">
        <div class="card card-body text-center mb-lg-0">
            <h4 class="card-title mb-1">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div><!-- end col -->
    <div class="col-lg-4">
        <div class="card card-body text-end mb-0">
            <h4 class="card-title mb-1">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div><!-- end col -->
</div><!-- end row -->

<div class="row">
    <div class="col-lg-4">
        <div class="card mb-0">
            <h4 class="card-header mt-0">Featured</h4>
            <div class="card-body">
                <h4 class="card-title mb-1">Special title treatment</h4>
                <p class="card-text">With supporting text below as a natural lead-in to
                    additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div><!-- end card -->
    </div><!-- end col -->
    <div class="col-lg-4">
        <div class="card mb-0">
            <div class="card-header">Featured</div>
            <div class="card-body">
                <h4 class="card-title mb-1">Special title treatment</h4>
                <p class="card-text">With supporting text below as a natural lead-in to
                    additional content.</p>
            </div>
            <div class="card-footer text-muted">2 days ago</div>
        </div><!-- end card -->
    </div><!-- end col -->
    <div class="col-lg-4">
        <div class="card mb-0">
            <div class="card-header">
                Quote
            </div>
            <div class="card-body">
                <blockquote class="card-blockquote mb-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                        erat a ante.</p>
                    <footer class="blockquote-footer font-size-12 mt-0">
                        Someone famous in <cite title="Source Title">Source Title</cite>
                    </footer>
                </blockquote>
            </div>
        </div><!-- end card -->
    </div><!-- end col -->
</div><!-- end row -->

<div class="row">
    <div class="col-lg-4">
        <div class="card mb-0">
            <img class="card-img-top img-fluid" src="assets/images/small/img-4.png" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title mb-1">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a
                    natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </p>
            </div>
        </div><!-- end card -->
    </div><!-- end col -->
    <div class="col-lg-4">
        <div class="card mb-0">
            <div class="card-body">
                <h4 class="card-title mb-1">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a
                    natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </p>
            </div>
            <img class="card-img-bottom img-fluid" src="assets/images/small/img-5.png" alt="Card image cap">
        </div><!-- end card -->
    </div><!-- end col -->
    <div class="col-lg-4">
        <div class="card mb-0">
            <img class="card-img img-fluid" src="assets/images/small/img-6.png" alt="Card image">
            <div class="card-img-overlay">
                <h4 class="card-title text-white mb-1">Card title</h4>
                <p class="card-text text-light">This is a wider card with supporting text below as a
                    natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text">
                    <small class="text-white">Last updated 3 mins ago</small>
                </p>
            </div>
        </div><!-- end card -->
    </div><!-- end col -->
</div><!-- end row -->

<div class="row">
    <div class="col-lg-6">
        <div class="card mb-0">
            <div class="row no-gutters align-items-center">
                <div class="col-md-4">
                    <img class="card-img img-fluid" src="assets/images/small/img-8.png" alt="Card image">
                </div>
                <div class="col-md-8">
                    <div class="card-body">
                        <h5 class="card-title mb-1">Card title</h5>
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to 
                        additional content.</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                </div>
            </div>
        </div><!-- end card -->
        </div><!-- end col -->
        <div class="col-lg-6">
        <div class="card mb-0">
            <div class="row no-gutters align-items-center">
                <div class="col-md-8">
                    <div class="card-body">
                        <h5 class="card-title mb-1">Card title</h5>
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to 
                        additional content.</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <img class="card-img img-fluid" src="assets/images/small/img-.png" alt="Card image">
                </div> 
            </div>
        </div><!-- end card -->
    </div><!-- end col -->
</div><!-- end row -->

<div class="row">
    <div class="col-lg-4">
        <div class="card bg-primary text-white-50">
            <h6 class="card-header bg-primary text-white">Primary Card</h6>
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card bg-success text-white-50">
            <h6 class="card-header bg-success text-white">Success Card</h6>
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card bg-info text-white-50">
            <h6 class="card-header bg-info text-white">Info Card</h6>
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        </div><!-- end row -->

        <div class="row">
        <div class="col-lg-4">
        <div class="card bg-warning text-white-50">
            <h6 class="card-header bg-warning text-white">Warning Card</h6>
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card bg-danger text-white-50">
            <h6 class="card-header bg-danger text-white">Danger Card</h6>
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card bg-dark text-white-50">
            <h6 class="card-header bg-dark text-white">Dark Card</h6>
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        </div><!-- end row -->

        <div class="row">
        <div class="col-lg-4">
        <div class="card bg-secondary text-white-50">
            <h6 class="card-header bg-secondary text-white">Secondary Card</h6>
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card bg-purple text-white-50">
            <h6 class="card-header bg-purple text-white">Purple Card</h6>
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card bg-light">
            <h6 class="card-header bg-light">Light Card</h6>
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
    </div><!-- end col -->
</div><!-- end row -->

<div class="row">
    <div class="col-lg-4">
        <div class="card border border-primary">
            <div class="card-header bg-transparent border-primary">
                <h6 class="my-0 text-primary">Primary Outline Card</h6>
            </div>
            <div class="card-body">
                <h5 class="card-title mb-1">card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card border border-success">
            <div class="card-header bg-transparent border-success">
                <h6 class="my-0 text-success">Success Outline Card</h6>
            </div>
            <div class="card-body">
                <h5 class="card-title mb-1">card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card border border-info">
            <div class="card-header bg-transparent border-info">
                <h6 class="my-0 text-info">Info Outline Card</h6>
            </div>
            <div class="card-body">
                <h5 class="card-title mb-1">card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        </div><!-- end row -->
        <div class="row">
        <div class="col-lg-4">
        <div class="card border border-warning">
            <div class="card-header bg-transparent border-warning">
                <h6 class="my-0 text-warning">Warning Outline Card</h6>
            </div>
            <div class="card-body">
                <h5 class="card-title mb-1">card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card border border-danger">
            <div class="card-header bg-transparent border-danger">
                <h6 class="my-0 text-danger">Danger Outline Card</h6>
            </div>
            <div class="card-body">
                <h5 class="card-title mb-1">card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card border border-dark">
            <div class="card-header bg-transparent border-dark">
                <h6 class="my-0 text-dark">Dark Outline Card</h6>
            </div>
            <div class="card-body">
                <h5 class="card-title mb-1">card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        </div><!-- end row -->

        <div class="row">
        <div class="col-lg-4">
        <div class="card border border-secondary mb-lg-0">
            <div class="card-header bg-transparent border-secondary">
                <h6 class="my-0 text-secondary">Secondary Outline Card</h6>
            </div>
            <div class="card-body">
                <h6 class="card-title mb-1">card title</h6>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card border border-purple mb-lg-0">
            <div class="card-header bg-transparent border-purple">
                <h6 class="my-0 text-purple">Purple Outline Card</h6>
            </div>
            <div class="card-body">
                <h6 class="card-title mb-1">card title</h6>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-lg-4">
        <div class="card border border-light mb-0">
            <div class="card-header bg-transparent border-light">
                <h6 class="my-0">Light Outline Card</h6>
            </div>
            <div class="card-body">
                <h6 class="card-title mb-1">card title</h6>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of 
                the card's content.</p>
            </div>
        </div>
    </div><!-- end col -->
</div><!-- end row -->

<div class="card-deck-wrapper">
    <div class="card-group">
        <div class="card mb-lg-0">
            <img class="card-img-top img-fluid" src="assets/images/small/img-2.png" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title mb-1">Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as
                    a natural lead-in to additional content. This content is a little
                    bit longer.</p>
                <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </p>
            </div>
        </div><!-- end card -->
        <div class="card mb-lg-0">
            <img class="card-img-top img-fluid" src="assets/images/small/img-1.png" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title mb-1">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural
                    lead-in to additional content.</p>
                <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </p>
            </div>
        </div><!-- end card -->
        <div class="card mb-0">
            <img class="card-img-top img-fluid" src="assets/images/small/img-3.png" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title mb-1">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as
                    a natural lead-in to additional content. This card has even longer
                    content than the first to show that equal height action.</p>
                <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </p>
            </div>
        </div><!-- end card -->
    </div><!-- end card group-->
</div>

<div class="row" data-masonry='{"percentPosition": true }'>
    <div class="col-sm-6 col-lg-4">
        <div class="card">
            <img src="assets/images/small/img-4.png" class="card-img-top" alt="...">
            <div class="card-body">
            <h5 class="card-title mb-1">Card title that wraps to a new line</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. 
            This content is a little bit longer.</p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-sm-6 col-lg-4">
        <div class="card">
            <img src="assets/images/small/img-5.png" class="card-img-top" alt="...">
            <div class="card-body">
            <h5 class="card-title mb-1">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-sm-6 col-lg-4">
        <div class="card">
            <img src="assets/images/small/img-7.png" class="card-img-top" alt="...">
        </div>
        </div><!-- end col -->
        <div class="col-sm-6 col-lg-4">
        <div class="card p-3 text-end">
            <blockquote class="card-blockquote  mb-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer font-size-12 m-0">
                Someone famous in <cite title="Source Title">Source Title</cite> 
            </footer>
            </blockquote>
        </div>
        </div><!-- end col -->
        <div class="col-sm-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <blockquote class="card-blockquote mb-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer font-size-12 m-0">
                        Someone famous in <cite title="Source Title">Source Title</cite>
                    </footer>
                </blockquote>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-sm-6 col-lg-4">
        <div class="card bg-primary text-white text-center p-3">
            <blockquote class="card-blockquote m-0">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer class="blockquote-footer text-white font-size-12 mt-0 mb-0">
                    Someone famous in <cite title="Source Title">Source Title</cite>
                </footer>
            </blockquote>
        </div>
        </div><!-- end col -->
        <div class="col-sm-6 col-lg-4">
        <div class="card">
            <div class="card-body">
            <h5 class="card-title mb-1">Card title</h5>
            <p class="card-text">This is another card with title and supporting text below. This card has some additional 
            content to make it slightly taller overall.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-sm-6 col-lg-4">
        <div class="card text-center">
            <div class="card-body">
            <h5 class="card-title mb-1">Card title</h5>
            <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div><!-- end col --> 
</div><!-- end row -->