Open In App

How to design Responsive card-deck with fixed width in Bootstrap?

Last Updated : 24 Jun, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

To design a responsive card deck with a fixed width in Bootstrap, utilize a grid layout of cards. Apply custom CSS to set a fixed width for each card, ensuring they maintain consistent dimensions across various screen sizes. Utilize Bootstrap’s responsive utilities to adjust card spacing and layout as needed for different viewport sizes.

Approach

  • Begin by linking the Bootstrap CSS framework in the <head> section to access its predefined styles.
  • Utilize Bootstrap’s .card class for card styling and apply mx-auto class to center the card horizontally.
  • Set a fixed width for the card using inline styles or custom CSS to ensure consistent dimensions across viewports.

Example 1: The example shows the above-explained approach.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    
    <title>
        How to design Responsive card-deck 
        with fixed width in Bootstrap ?   
    </title>

    <!-- bootstrap linked-->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
</head>

<body>

    <!-- Card design with bootstrap class mx-auto 
        for making it centered in the div-->
    <div class="card mx-auto" style="width:18rem;">
        <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png"
                    alt="Card image cap">

        <div class="card-body">
            <h5 class="card-title">
                GeeksforGeeks
            </h5>

            <p class="card-text">
                Geeks for Geeks is the best place 
                to improve your computer science 
                knowledge.
            </p>

            
            <a href="#" class="btn btn-success">
                Click me
            </a>
        </div>
    </div>

    <!--card end here-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
</body>

</html>


Output:

Example 2: The example implement how to embed that card efficiently such that it is responsiveness.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <title>
        How to design Responsive card-deck 
        with fixed width in Bootstrap ?
    </title>

    <!-- bootstrap linked-->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
</head>

<body>
    <div class="container-fluid p-0 m-0 
                align-items-center 
                justify-content-center d-flex"
            style="min-height: 100vh; 
            background-color: #498433;">

        <!-- Row for the card-->
        <div class="row w-100 p-0 w-0">

            <!-- Column for card-->
            <div class="col-lg-4 mb-2">
                <div class="card mx-auto" style="width:18rem;">
                    <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png"
                                alt="Card image cap">

                    <div class="card-body">
                        <h5 class="card-title">
                            Geeks for Geeks
                        </h5>
                        <p class="card-text">
                            Geeks for Geeks is the best place 
                            to improve your computer science
                            knowledge.
                        </p>

                        
                        <a href="#" class="btn btn-success">
                            Click me
                        </a>
                    </div>
                </div>
            </div>

            <!-- Another column for card -->
            <div class="col-lg-4 mb-2">
                <div class="card  mx-auto" style="width:18rem;">
                    <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png"
                                alt="Card image cap">

                    <div class="card-body">
                        <h5 class="card-title">
                            Geeks for Geeks
                        </h5>

                        <p class="card-text">
                            Geeks for Geeks is the best place 
                            to improve your computer science
                            knowledge.
                        </p>


                        <a href="#" class="btn btn-success">
                            Click me
                        </a>
                    </div>
                </div>
            </div>

            <!-- Another column for card -->
            <div class="col-lg-4 mb-2">
                <div class="card  mx-auto" style="width:18rem;">
                    <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png"
                            alt="Card image cap">

                    <div class="card-body">
                        <h5 class="card-title">
                            Geeks for Geeks
                        </h5>

                        <p class="card-text">
                            Geeks for Geeks is the best place 
                            to improve your computer science
                            knowledge.
                        </p>


                        <a href="#" class="btn btn-success">
                            Click me
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
</body>

</html>

Output:



Next Article
Design a Responsive Card with a Carousel inside it in Bootstrap

T
tarun007
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox