How to design Responsive card-deck with fixed width in Bootstrap? Last Updated : 24 Jun, 2024 Summarize Comments Improve Suggest changes Share 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. ApproachBegin 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: Comment More infoAdvertise with us Next Article How to design Responsive card-deck with fixed width in Bootstrap? T tarun007 Follow Improve Article Tags : Web Technologies HTML Bootstrap HTML-Misc Bootstrap-4 Bootstrap-Misc Bootstrap-Questions +3 More Similar Reads How to Create Responsive Card with a Video Background in Bootstrap? Cards are very useful things in web development. Cards can hold various types of content, such as text, images, and links, making them perfect for displaying information in a structured format. And the background video can enhance the style of the web page. In this tutorial, we will focus on how to 2 min read How to Create Responsive Divs in Bootstrap ? To create responsive divs in Bootstrap, utilize the grid system with container and row classes. Define columns using col classes and specify breakpoints for different screen sizes. This ensures divs adjust their layout and size responsively across devices. Below are the approaches to creating respon 2 min read Design a Responsive Card with a Carousel inside it in Bootstrap A responsive carousel displays images or content in a rotating manner, adjusting seamlessly to different screen sizes for optimal viewing experience. In this article, we will create a responsive card with a carousel inside it with the help of Bootstrap5.Preview:ApproachHere we create a Bootstrap car 2 min read How to make Responsive Carousel in Bootstrap ? Bootstrap Responsive Carousel simplifies the creation of responsive carousels for dynamic content display. Utilize the Carousel component with a suitable HTML structure, ensuring proper sizing and responsive breakpoints for optimal display across devices. ApproachCreate an HTML document with Bootstr 2 min read How to Create a Responsive Table in Bootstrap ? A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens.Table of Content Using the table-responsive 4 min read Like