bootstrap v5.2 cards examples

Bootstrap v5.2 Cards Examples

updated 19/08/22 By frontendshape

Today we will create cards using bootstrap v5.2. We will create card, design card with shadow and border. first you need to setup bootstrap v5.2 project. you can use cdn or read below article.

How to Install Bootstrap 5.2 with Vite


Bootstrap 5.2 Cards Examples

1. Simple Bootstrap v5.2 cards.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap v5.2 Cards Design</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
            crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="vh-100 d-flex justify-content-center align-items-center">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">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>
                        <a href="#" class="btn btn-primary">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
bootstrap v5.2 card

bootstrap v5.2 card


2. Bootstrap v5.2 cards with border style.

<div class="col-md-4">
    <div class="card border border-primary">
        <div class="card-body">
            <h5 class="card-title">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>
            <a href="#" class="btn btn-primary">Read More</a>
        </div>
    </div>
</div>
Bootstrap v5.2 cards with border style

Bootstrap v5.2 cards with border style


3. Bootstrap v5.2 cards with image.

<div class="card border border-primary">
    <img src="https://cdn.pixabay.com/photo/2022/08/03/15/29/bird-7362864__340.jpg" class="card-img-top"
        alt="card image">
    <div class="card-body">
        <h5 class="card-title">Bootstrap v5.2 Card With Image</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>
        <a href="#" class="btn btn-primary">Read More</a>
    </div>
</div>
bootstrap v5.2 cards with image.

bootstrap v5.2 cards with image.


4. Bootstrap v5.2 cards with shadow.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap v5.2 Cards Shadow</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
            crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="vh-100 d-flex justify-content-center align-items-center">
            <div class="col-md-3">
                <div class="card border shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Bootstrap v5.2 Card With shadow</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>
                        <a href="#" class="btn btn-primary">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>
bootstrap v5.2 cards with shadow

bootstrap v5.2 cards with shadow