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

0 votes
89 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

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

1 Answer

0 votes
Ravi Vishwakarma answered 17-Aug-2021 by Ravi Vishwakarma

The card is a container in bootstrap that holds the card's data like title, image, text. It includes options for headers, footers, body, background colors, and powerful display options.

we are using the '.card' class for creating the card on a web page. the card has three parts header, body, and last footer. in the footer part, we can add the images, header text, etc making the header part using the '.card-header' class, also create the body parts using the '.card-body' class in the part, we can create the card title, card sub-title, main text, etc and last card footer, use the '.card-footer' class for making the footer parts of cards. 

.card                 create the card
.card-header create the card header
.card-body     create the card body
.card-footer   create the footer
.card-title       create the card title
.card-text       add text in card body

Example 

<!doctype html>

<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <!-- Bootstrap CSS -->
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' integrity='sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh' crossorigin='anonymous'>
    <!-- font awesome -->
    <link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.10.0/css/all.css' integrity='sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p' crossorigin='anonymous'/>
    <title>Cards demo</title>
</head>
<body>
    <div class='container mt-5'>
        <h1 class='text-center'>Cards demo</h1>
        <p>
            Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.
        </p>
        <div class='row'>
            <div class='col-sm-4'>
                <div class='card ' style='width: 18rem;'>
                    <img src='https://source.unsplash.com/1600x900/?nature,water' class='card-img-top' alt='card image' />
                    <div class='card-body'>
                        <h5 class='card-title'>Card title</h5>
                        <p class='card-text'>this is card text, if you want to read more about this image then click the button</p>
                        <a href='#' class='btn btn-outline-primary'>Read more
                            <span class='spinner-border spinner-border-sm'></span>
                        </a>
                    </div>
                </div>
            </div>
            <div class='col-sm-4'>
                <div class='card ' style='width: 18rem;'>
                    <img src='https://source.unsplash.com/1600x900/?nature,wood' class='card-img-top' alt='card image' />
                    <div class='card-body'>
                        <h5 class='card-title'>Card title</h5>
                        <p class='card-text'>this is card text, if you want to read more about this image then click the button</p>
                        <a href='#' class='btn btn-outline-primary'>Read more
                            <span class='spinner-grow spinner-grow-sm'></span>
                        </a>
                    </div>
                </div>
            </div>
            <div class='col-sm-4'>
                <div class='card ' style='width: 18rem;'>
                    <img src='https://source.unsplash.com/1600x900/?nature,tree' class='card-img-top' alt='card image' />
                    <div class='card-body'>
                        <h5 class='card-title'>Card title</h5>
                        <p class='card-text'>this is card text, if you want to read more about this image then click the button</p>
                        <a href='#' class='btn btn-outline-primary'>Read more
                            <i class='fa fa-arrow-alt-right'></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src='https://code.jquery.com/jquery-3.4.1.slim.min.js' integrity='sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n' crossorigin='anonymous'></script>
    <script src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js' integrity='sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo' crossorigin='anonymous'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js' integrity='sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6' crossorigin='anonymous'></script>
</body>
</html>

Output

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