Card Group

Example 1

Source Code

<div class="card-group mb-8">

    <!-- Card -->
    <div class="card">

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/vegetable.jpeg" alt="Vegetable">
        <!-- /card image -->

        <!-- Card Body -->
        <div class="card-body">

            <!-- Card Title-->
            <h2 class="card-title">Card title</h2>
            <!-- Card Title-->

            <!-- Card Text-->
            <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>
            <!-- /card text-->

            <!-- Card Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

        </div>
        <!-- /card body -->

    </div>
    <!-- /card -->

    <!-- Card -->
    <div class="card">

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/plant.jpeg" alt="plant">
        <!-- /card image -->

        <!-- Card Body -->
        <div class="card-body">

            <!-- Card Title-->
            <h2 class="card-title">Card title</h2>
            <!-- Card Title-->

            <!-- Card Text-->
            <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>
            <!-- /card text-->

            <!-- Card Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

        </div>
        <!-- /card body -->

    </div>
    <!-- /card -->

    <!-- Card -->
    <div class="card">

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/coffee-cookies.jpeg" alt="Coffee">
        <!-- /card image -->

        <!-- Card Body -->
        <div class="card-body">

            <!-- Card Title-->
            <h2 class="card-title">Card title</h2>
            <!-- Card Title-->

            <!-- Card Text-->
            <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>
            <!-- /card text-->

            <!-- Card Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

        </div>
        <!-- /card body -->

    </div>
    <!-- /card -->

</div>

Example 2

Source Code

<div class="card-deck mb-8">

    <!-- Card -->
    <div class="card">

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/asphalt-balancing.jpeg" alt="Balancing">
        <!-- /card image -->

        <!-- Card Body -->
        <div class="card-body">

            <!-- Card Title-->
            <h2 class="card-title">Card title</h2>
            <!-- Card Title-->

            <!-- Card Text-->
            <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>
            <!-- /card text-->

            <!-- Card Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

        </div>
        <!-- /card body -->

    </div>
    <!-- /card -->

    <!-- Card -->
    <div class="card">

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/sunset.jpeg" alt="sunset">
        <!-- /card image -->

        <!-- Card Body -->
        <div class="card-body">

            <!-- Card Title-->
            <h2 class="card-title">Card title</h2>
            <!-- Card Title-->

            <!-- Card Text-->
            <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>
            <!-- /card text-->

            <!-- Card Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

        </div>
        <!-- /card body -->

    </div>
    <!-- /card -->

    <!-- Card -->
    <div class="card">

        <!-- Card Image -->
        <img class="card-img-top" src="assets/images/card/person-walking.jpeg" alt="Person">
        <!-- /card image -->

        <!-- Card Body -->
        <div class="card-body">

            <!-- Card Title-->
            <h2 class="card-title">Card title</h2>
            <!-- Card Title-->

            <!-- Card Text-->
            <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>
            <!-- /card text-->

            <!-- Card Text-->
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
            <!-- /card text-->

        </div>
        <!-- /card body -->

    </div>
    <!-- /card -->

</div>

Example 3

Source Code

<div class="card-columns">

<!-- Card -->
<div class="card">

    <!-- Card Image -->
    <img class="card-img-top" src="assets/images/card/painted-hand.jpeg" alt="Hand">
    <!-- /card image -->

    <!-- Card Body -->
    <div class="card-body">
        <h2 class="card-title">Card title that wraps to a new line</h2>
        <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>
    <!-- /card body -->

</div>
<!-- /card -->

<!-- Card -->
<div class="card">

    <!-- Blockquote -->
    <blockquote class="blockquote mb-0 card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
            a ante.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
    <!-- /blockquote -->

</div>
<!-- /card -->

<!-- Card -->
<div class="card">

    <!-- Card Image -->
    <img class="card-img-top" src="assets/images/card/bottle.jpeg" alt="Bottle">
    <!-- /card image -->

    <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <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>
<!-- /card -->

<!-- Card -->
<div class="card bg-primary text-center">

    <!-- Card Body -->
    <blockquote class="blockquote mb-0 text-white card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
            erat.</p>
        <footer class="blockquote-footer text-white">
            <small>
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
    <!-- /card body -->

</div>
<!-- /card -->

<!-- Card -->
<div class="card text-center">

    <!-- Card Body -->
    <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <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>
    <!-- /card body -->

</div>
<!-- /card -->

<!-- Card -->
<div class="card">

    <!-- Card Image -->
    <img class="card-img" src="assets/images/card/doughnut.jpeg" alt="Doughnut">
    <!-- /card image -->

</div>
<!-- /card -->

<!-- Card -->
<div class="card text-right">

    <!-- Card Body -->
    <blockquote class="blockquote mb-0 card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
            a ante.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
    <!-- /card body -->

</div>
<!-- /card -->

<!-- Card -->
<div class="card">

    <!-- Card Body -->
    <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <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>
    <!-- /card body -->

</div>
<!-- /card -->

</div>