Open In App

Bootstrap 5 Cards Layout

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Cards layout facilitates a variety of classes to be used for styling the content within the cards component, although, there are no responsive layout options available yet in Bootstrap. There are 3 components that help to define the Card layout, which are described below:

  • Card groups: This component will help to render the cards as a single element with equal width and height columns. They use display: flex. While we use footer content in the card layout, will automatically line up.
  • Grid cards: A Bootstrap grid system is used to display how many cards are visible on the viewport. The .row-cols-1  is used to display cards in one row and .row-cols-md-2 split four cards across multiple rows, from the medium breakpoint up.
  • Masonry: In v4 of bootstrap we tried to mimic masonry but it had a lot of side effects so masonry is not included in bootstrap. If we want to use a masonry layout, we can use a masonry plugin which is not included in bootstrap.

Syntax:

<div class="card-group">
    <div class="card">
        <img src="..." 
            class="card-img-top" 
            alt="...">
    <div class="card-body">
        <h5 class="card-title">
            ...
        </h5>
    <p class="card-text">
        ...
    </p>
</div>
    <div class="card-footer">
        <small class="text-muted">
            ...
        </small>
    </div>
</div>

Example 1: This example describes the basic usage of the Bootstrap 5 Cards layout by specifying the different Card groups.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
         rel="stylesheet">
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Cards layout</h2>
    </div>
 
    <div class="card-group">
        <div class="card">
            <img src=
                class="card-img-top h-25"
                alt="gfg_img">
            <div class="card-body">
                <h5 class="card-title">
                    User 1
                </h5>
                <p class="card-text">
                    Skills : JavaScript - It is the world’s
                    most popular lightweight, interpreted
                    compiled programming language. It is
                    also known as a scripting language for
                    web pages.
                </p>
                <p class="card-text">
                    <small class="text-muted">
                        Last updated 10 mins ago
                    </small>
                </p>
            </div>
        </div>
 
        <div class="card">
            <img src=
                class="card-img-top h-25"
                alt="gfg_img">
            <div class="card-body">
                <h5 class="card-title">
                    User 2
                </h5>
                <p class="card-text">
                    Skills : DSA - The term DSA stands for
                    Data Structures and Algorithms. As the
                    name itself suggests it is a combination
                    of two separate yet interrelated topics
                    â€“ Data Structure and Algorithms.
                </p>
            </div>
            <div class="card-footer">
                <small class="text-muted">
                    Last updated 5 mins ago
                </small>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

 

Example 2: In this example, the .row-cols-2 class lays out the cards on two-column, and the .row-cols-md-2 class splits 4 cards to equal width across multiple rows is shown.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0">
    <link href=
          rel="stylesheet">
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Cards layout</h2>
    </div>
    <br><br>
    <div class="row row-cols-2 row-cols-md-2">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        C++
                    </h5>
                    <p class="card-text">
                        C++ is widely used nowadays for
                        competitive programming.
                    </p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        Java
                    </h5>
                    <p class="card-text">
                        Java has been one of the most popular
                        programming languages for many years.
                    </p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        Python
                    </h5>
                    <p class="card-text">
                        Python is most widely used multi-purpose,
                        high-level programming language.
                    </p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        Javascript
                    </h5>
                    <p class="card-text">
                        Javascript can be used for Client-side as
                        well as Server-side developments.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/card/#card-layout



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads