Learn how to customize the number of cards displayed per row in a card deck using Bootstrap 4

Can someone help me figure out how to set the number of cards per row in a card-deck using Bootstrap?

For instance, I would like to display two cards per row:

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>
cssbootstrap-4bootstrap-cards

Answer №1

Is this the content you were looking for?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>

Answer №2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
 
<div class="card-deck row">
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card content title</h5>
      <p class="card-text">
        Content of the card
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  ...

Answer №3

I believe you will appreciate this recommendation: If you desire more space between cards, simply switch the class from .md-3 to .md-4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div>
   <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div> <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div> <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div> <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div>
</div>

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

Trouble with CSS loading due to div in Visual Studio MVC

Currently, I am working with Visual Studio 2013 MVC and have a situation regarding the styling of my navbar in _Layout. The navbar includes a messages dropdown menu that utilizes CSS and JS extensively. Interestingly, when I load the messages as a partial ...

javascriptjquerycssrazormodel-view-controller

Why is my JQuery code refusing to function even though I have coded it correctly?

Encountering an issue with the carousel functionality. The button is supposed to switch between play and pause, triggering the carousel accordingly. However, upon clicking the button, it seems to switch too quickly without properly pausing or playing the c ...

javascripthtmljquerycssbootstrap-4

Identifying the presence of a CSS class in order to add styling to a different element

Looking for help with CSS: /* targeting laptops */ @media only screen and (pointer:fine) and (max-device-height: 620px) { #root:has(.projects) ~ body { overflow: auto; /* allow scrolling */ } } My desired outcome is to set overflow: auto o ...

javascripthtmlcssreactjs

How to perfectly align content on a webpage

Can someone help me understand why my webpage is off-centered as it scales up? I have set a minimum width of 1000px, but it still appears to be centered at 30%-70%. Any insights on this issue would be greatly appreciated. <!DOCTYPE html PUBLIC "-//W3 ...

htmlcss

What is the best way to implement CSS Float in typescript programming?

For a specific purpose, I am passing CSS Float as props. To achieve this, I have to define it in the following way: type Props = { float: ???? } const Component = ({ float }: Props) => {......} What is the most effective approach to accomplish this? ...

cssreactjstypescriptcss-float

HTML/CSS - How to make an element wider than its containing element while staying visible

I am currently working on a web page that generates a table with a green background labeled by an h2 element. The challenge I'm facing is ensuring that the h2 element extends horizontally as far as the user scrolls so that there is always a green bar ...

htmlcsslayout

Dynamically updating multiple rows in Bootstrap datepicker

I have a table with multiple rows from a database. Each row in the table contains a date column that selects today's date for only one row. However, since there are multiple rows, I need to update the datepicker for all the rows. I attempted to add t ...

node.jsbootstrap-4ejs

yeoman / cssmin - Reduce the size of CSS files without combining them

Currently, I am developing a web application using the yeoman webapp generator. In my project, I have two scss base files - one is my standard file called main.scss and the other is for old Internet Explorer versions named main-old-ie.scss. I found this te ...

cssgruntjsyeoman

Is it possible to clear a row of images and then repopulate it with new images without losing the click listeners associated with each image?

I am currently developing a memory game that involves clicking on images as the main objective. After clicking on an image, the pictures are then rearranged on the page. However, if you click on the same image twice, you will lose and the game will reset. ...

javascriptjqueryhtmlbootstrap-4

Enhance the organization of your current webpage by incorporating three divs positioned side by side

I currently have a webpage set up, accessible here: https://plnkr.co/edit/5NWm4E868nXYyixd2SLv?p=preview The current layout looks okay, but I feel restricted in terms of customization. Therefore, I am interested in creating 3 divs where I can have more co ...

htmlcss

Toggle the visibility of a div element and smoothly scroll to it on the page

Upon clicking the form, my goal is to show or hide it and scroll down to view the form. The current code I have in place seems to work after the first click. However, on the initial click, it shows the form but fails to scroll down. Any insights on what I ...

javascriptjqueryhtmlcss

Issue with footer position not remaining at the bottom of the page

Hey there, I've been experiencing some issues with my website's layout. I tried setting a min-height of 1000px on the mainbody to make all the pages the same size, but it's caused a problem with my footer. Now, the footer is positioned in th ...

htmlcsswebfooter

Attempting to discover the secret to keeping a hamburger menu fixed in place once it has been expanded

Exploring this example https:// codepen.io/ducktectiveQuack/pen/mPGMRZ I had trouble understanding the code block, so I resorted to trickery (just remove the space between the '/' and the 'c' lol) My goal is to have the hamburger men ...

javascripthtmlcss

What are the steps to create a "gooey glide" animation using React and MUI?

I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...

cssreactjsanimationmaterial-uicss-transitions

Tips for ensuring long text wraps to the next line when it exceeds the width of the browser window

I'm struggling with CSS styles and properties. I want the text to wrap to the next line instead of overflowing off the browser screen. I've illustrated what's currently happening versus what I actually need. https://i.stack.imgur.com/mPGt8 ...

htmlcss

Troubleshooting the Compatibility Issue Between Wordpress Theme and SSL

My personal blog is functional when accessed via http, but encounters issues with loading CSS code when accessed via https. Any suggestions on how to resolve this? The SSL certification is through the Let's Encrypt program. Website: Broken Link: ...

phpcsswordpress

Troubleshooting problem with Bootstrap 4 columns alignment - issue with nested columns wrapping

I attempted to create a column layout using Bootstrap 4, but unfortunately, the alignment is off. The nested columns do not display properly and the last one even breaks to a new line. <div class="row"> <div class="col-sm-3"> <d ...

csstwitter-bootstrapbootstrap-4

JavaScript line beneath the navigation

I have implemented a small JavaScript code snippet to add a line under links on my website. Here is the code: $("li").on("click", function() { $("li").removeClass("line"); $(this).addClass("line"); }); .line { border-bottom: 4px solid # ...

javascripthtmlcsstwitter-bootstrapweb

Having trouble mastering the art of Mobile First Responsive Design

I'm encountering some challenges with implementing a "mobile first" design strategy. After reading multiple articles and the Mobile First (2011) book, it seems like the process involves creating the mobile version of a website before developing the de ...

htmlcssresponsive-designuser-experience

What is the best way to combine UI grid cells into a single column using AngularJS?

I am looking for a way to consolidate multiple cells into one column in AngularJs UI grid. Can this be achieved with UI-Grid? Any insights or solutions are welcome. ...

angularjsbootstrap-4angular-ui-grid