search

prof-rossetti / internet-technologies

Internet Technologies (for Business)
Other
2 stars 72 forks source link

Bootstrap 5.0 Cards and Grid #28

Closed s2t2 closed 1 year ago

s2t2 commented 2 years ago

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Cards and Grid Example</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>

<!--

RESPONSIVE GRID OF CARDS

SEE:

    https://getbootstrap.com/docs/5.0/layout/grid/

    https://getbootstrap.com/docs/5.0/components/card/

    https://getbootstrap.com/docs/5.0/components/card/#grid-cards

-->

<div class="container">
    <div class="row row-cols-3">

        <div class="card col" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <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>
            </div>
        </div>

        <div class="card col" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <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>
            </div>
        </div>

        <div class="card col" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <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>
            </div>
        </div>

    </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>