Cards in Bootstrap

Ethan Karla 292 28 Jul 2021

What is the need of cards in Bootstrap? Explain it with the help of an example?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 03 Aug 2021

A card is a flexible container used to create a div with some margin, padding, border with some relevant colors. It includes headers, footers and powerful display options that make it a more extensible content container.

Let's have an example to demonstrate how to use progress-animated bar in Bootstrap :

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>

    <title>Bootstrap Card</title>

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' integrity='sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==' crossorigin='anonymous' referrerpolicy='no-referrer' />

   </head>

<body>

    <div class='container d-flex justify-content-center flex-column align-items-center'>

        <h2>Personal Profile</h2>

        <p>Mindstick Software Pvt. Ltd.</p>

        <div class='card' style='width: 400px'>

            <img class='card-img-top align-self-center' src='https://uifaces.co/images/man.svg' alt='Card image' style='width: 80%'>

            <div class='card-body'>

                <h4 class='card-title'>Mark Walter</h4>

                <p class='card-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                <a href='#' class='btn btn-outline-primary'>Follow <span class='fa fa-plus-circle'></span></a>

            </div>

        </div>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

forum

Cards in Bootstrap

Can you answer this question?

1 Answers