forum

home / developersection / forums / cards in bootstrap

Ask Question

Cards in Bootstrap

Ethan Karla 210 28-Jul-2021

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

bootstrap

Updated on 28-Jul-2021

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.

Can you answer this question?

Answer

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

Ethan Karla

Can you answer this question?

1 Answers

Liked By