Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap card provide us a lot of functionality that we can play around. We can also make them responsive and also of fixed size all depends on our need. So the code for the fixed size bootstrap card deck is given below. We have provided the code without using CSS properties so it looks much simpler and easier to understand.

In this article, we will use some Bootstrap classes to design responsive card. 

Also you can look for the code for how to create a card and then use it according to your need. You can modify the pictures using img tag given inside the card class div.

Example 1: 

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=
        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=
                    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-->
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
</body>
  
</html>


Output:

Example 2:

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=
        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=
                                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=
                                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=
                            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>
  
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
</body>
  
</html>


Output:

Note: Example 1 represents how to make a single card while example 2 represents how to embed that card efficiently such that it is responsive.



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