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

01 Jun, 2020
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="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:
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:
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.
Bootstrap-4
Bootstrap-Misc
HTML-Misc
Picked
Bootstrap
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.