What is the best way to create a deck of cards using cards of the same width?

Need help creating a responsive card deck with fixed-width cards in Bootstrap 4. I've included the code below, but it's not rendering responsively. Can anyone assist?

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

<div class="card-deck">
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 1</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 2</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 3</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 4</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To create a Bootstrap 4 card deck with cards of fixed-width, follow these steps:

Place each card inside a column using the classes col-auto mb-3 (auto-width column + margin-bottom with three units).

To center the cards, add the justify-content-center class to the row.

Below is a sample code snippet for reference:

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

<div class="container-fluid mt-4">
    <div class="row justify-content-center">
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        // Repeat above card structure as needed
    </div>
</div>

Answer №2

The website here states that the layout options provided are currently not responsive. To address this issue, a simple solution is to replace the parent container from 

<div class="card-deck">...</div>
with 
<div class="row">...</div>
.

Answer №3

Ensuring uniform card height in a deck.

The decision to include a row-deleting deck was the right call. Utilizing col-lg-3 col-md-2 col-sm-12 will result in a four-card layout on desktop, gradually shrinking down to one card on mobile devices.

To maintain consistency, adjust the card height based on the tallest card so that all cards appear aligned properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align a link in the middle along with the header beside it

My HTML header currently has a simple title bar with a back href. However, the headline <h1> is positioned UNDER the href, which is not what I want. I am looking to create a centered title bar with a headline and a button that are aligned at the same ...

htmlcss

When hovering over items in the navigation bar, the entire bar expands seamlessly

I've spent countless hours trying to troubleshoot an issue with my dropdown menu that expands whenever I hover over it. The bar stretches out to accommodate the list of dropdown contents and then reverts back to normal when I move my cursor away. My a ...

javascripthtmljquerycsstwitter-bootstrap

Creating diagonal background cutouts using CSS

Can you create a diagonal cut in a background color using CSS? Check out this example https://i.sstatic.net/vtpYf.jpg .item { color: #fff; font-size: 30px; background-color: #565453; padding: 10px 10px 10px 10px; width: 52%; text-align: ce ...

css

Utilize varying sizes within a single column using Bootstrap

I am struggling to create a heading that spans the entire width of my listview within Bootstrap. Despite being in the same column, the heading does not extend as far as the listview. I desire for the title to stretch all the way across the list, leading m ...

csstwitter-bootstrap

Whenever I create a new JavaScript application, the CSS files do not seem to reflect the most recent changes

My Next.js App is running smoothly on my client when I do npm run build and test it with node server js. However, the issue arises when I move the app to a production server. After executing npm run build on the server, everything seems to work fine except ...

cssnode.jsnext.js

Slideshow Display Suddenly Halts at the Last Image

I am currently working on a Bootstrap JS Carousel that showcases several images stored in the project folder. Each image's filepath is retrieved from an SQL Server database and displayed within the carousel. While the images are displaying correctly ...

javascriptc#jqueryhtmlasp.net

The table from datatables.net is failing to load with Ajax requests

Having trouble with v1.10 Datatables.net table not loading via ajax? The examples and documentation at datatables.net didn't provide a solution. Despite the table displaying, it shows "No data available in table". This issue is occurring in an older M ...

javascriptc#htmljquerydatatables

How to prevent the navbar-collapse feature from activating within a Bootstrap 4 container

Hello, I am seeking a way to deactivate the collapsible feature in the navbar of Bootstrap 4. I would like the navbar to occupy the entire width, while the content inside, restricted by the container class, maintains the default width. I attempted to achi ...

twitter-bootstrapbootstrap-4

Is it possible to drag and drop content *FROM* a web browser?

While dragging items into a browser is a well-documented process, HTML5 has made it even easier. However, my curiosity lies in the possibility of dragging and dropping out of a browser. In this hypothetical situation, there would be a webpage element (su ...

htmldrag-and-drop

Set up a custom JavaScript function to automatically refresh a webpage

I am in the process of setting up a JavaScript function to refresh on a specific webpage. The website utilizes an overarching JS and CSS framework, but I desire this particular function to load in a unique manner. The JS function within the framework dyna ...

javascriptjquerycss

How can I prevent anchors from performing any action when clicked in React?

My dilemma involves this HTML element: <a href onClick={() => fields.push()}>Add Email</a> The purpose of the href attribute is to apply Bootstrap styles for link styling (color, cursor). The issue arises when clicking on the element caus ...

javascripttwitter-bootstrapreactjsbootstrap-4

Tips for detaching jQuery from HTML

I have attempted multiple combinations without success. Below is my current code (all within the HTML document): <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="te ...

jqueryasp.net-mvchtml

Adjusting box width based on device type: desktop and mobile

I'm currently working on a form that includes several mat-form-fields. I have set the width of these items to 750px, but this does not work well for mobile devices. I am trying to figure out how to make the form or mat-form-field automatically adjust ...

cssangularflexboxangular-material

Capture images with html2canvas in HTML

I am currently working on converting HTML to an image using html2canvas. I have encountered an issue where Arabic characters are not being converted correctly! </html> <body dir="rtl"> <a class="STO_one" href="#"> <span& ...

javascriptphphtmlcanvashtml2canvas

In what location is it possible to define this CSS property?

After inheriting a website, I am encountering CSS issues that are driving me crazy. There is a mysterious div element with a height of 185px that is causing content truncation problems. The strange part is that this height is not defined anywhere in the st ...

cssheight

If the parent class in HTML has a class of "active," then use jQuery to

I have attempted this, but unfortunately did not achieve the desired result. I am just brainstorming my ideas here. HTML <html> <div> <div class="spinner"> </div> </div> </html> Jquery if (".spinner"){ th ...

javascriptjqueryhtmlcss

How to Handle the Absence of HTML5 Spellcheck in Specific Web Browsers

While HTML5 spellcheck functionality may vary across different browsers, there are instances where it might not be supported in certain corporate environments. In the event that HTML5 is not supported in a particular browser, it's essential to first c ...

javascripthtmlspell-checking

Tips on launching a bootstrap modal by clicking a button in an Angular project

I'm working with a Bootstrap Modal that includes a button to trigger it. Here is the code: <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data- ...

angularbootstrap-4

Utilize the Module Function in a Prestashop Template File

I'm trying to implement a search module in my header.tpl file. Here is the code I've used: {include file='./modules/blocksearch/blocksearch.tpl'} Unfortunately, it doesn't seem to be working and instead of displaying the search m ...

phphtmlsmartyprestashop

What could be the reason behind the improper display of JavaScript for ID overlay2?

Why is it that when I try to have two overlays with different messages display upon clicking buttons, they both end up showing the same message? Even after changing the ID tag names, the issue persists. Can someone shed some light on what might be causin ...

javascriptjqueryhtmlcss