Creating a layout with Bootstrap 4 cards split into two rows

I need to change my layout from 3 columns to 2 columns. I know I can achieve this using CSS like the code snippet below, but I'm curious if there's a built-in Bootstrap method for this:

.card-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

Here is the HTML structure:

<div class="card-columns">
  <div class="card">
    <p>This card has some text content.</p>
  </div>
  <div class="card">
    <p>Another card with less content.</p>
  </div>
  <div class="card">
    <p>This card has more content than the others.</p>
  </div>
  <div class="card">
    <p>Shorter text in this card.</p>
  </div>
  <div class="card">
    <p>Brief description here.</p>
  </div>
</div>

CSS styling:

.card {
  padding: 15px;
}

Check out the DEMO: https://jsfiddle.net/no8z36sc/

csstwitter-bootstrapbootstrap-4

Answer №1

1) Change the class 'card-columns' to 'row'.

2) Include the class 'col-3' for each card div.

Your updated code should resemble this,

<div class="row">
  <div class="card col-3">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card This is a longer card This is a longer card This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
</div>

Answer №2

It seems like you're looking to display 2 cards side by side in a row, you can achieve this with the following code:

<div class="row">
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
          <div class="card">
           <p>This is a longer card with supporting text below as a natural lead-in to 
              additional content. This content is a little bit longer.
           </p>
          </div>
       </div>
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
          <div class="card">
           <p>This is a longer card with supporting text below as a natural lead-in to 
              additional content. This content is a little bit longer.
           </p>
          </div>
       </div>
     </div>

Answer №3

At this point in time, there are no Bootstrap classes specifically designed for the manipulation of the column-count CSS property.

This limitation was identified on GitHub back in 2017, yet Bootstrap has not added any features to address this issue regarding the alignment of columns using classes.

However, a workaround exists without the need for CSS. Developers have been creating functionalities essential for Bootstrap's requirements.

For instance, specifying widths for various devices like this: w-sm-75 or w-md-50 is not possible within Bootstrap. The width property can only be set as w-75, w-100, and so forth.

An external stylesheet CDN link complements Bootstrap by continually adding developer-requested features still under development.

This stylesheet enables setting widths for different devices as demonstrated here: w-sm-50 w-md-100 w-50.

Additionally, it includes a column-count property via the class car-col-2.

In this context: car represents a card, col signifies the column count, and 2 specifies the desired number of columns ranging from 1 to 6.

By utilizing the car-col-2 CSS class, your layout will reflect these settings.

Important Note: This feature does not currently support multiple devices.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous>

<!-- Stylesheet for card-columns-count and other developing features -->
<link rel="stylesheet" href="https://drive.google.com/uc?id=1jLrfISsLUcRiwgNl0koSfsS6lylj0E7h">

<div class="card-columns car-col-2">
  <div class="card">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is slightly extensive.</p>
  </div>
  <div class="card">
    <p>This is a longer card.</p>
  </div>
  <div class="card">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is slightly extensive.</p>
  </div>
  <div class="card">
    <p>This is a longer card.</p>
  </div>
  <div class="card">
    <p>This is a longer card.</p>
  </div>
  <div class="card">
    <p>This is a longer card.</p>
  </div>
  <div class="card">
    <p>This is a significantly long card. This is a significantly long card. This is a significantly long card. This is a significantly long card.</p>
  </div>
  <div class="card">
    <p>This is a longer card.</p>
  </div>
</div>

JSFIDDLE: https://jsfiddle.net/urqf0e61/

Answer №4

Using CSS grid layout can easily help you achieve the desired result. Adjust the number of columns by setting NO_OF_COLUMNS in the CSS property grid-template-columns: repeat(NO_OF_COLUMNS, 1fr);

.card {
      padding: 15px;
      height: auto;
      display: flex;
 }

.card-columns{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 1fr;
      grid-column-gap: 20px;
      grid-row-gap: 10px;
      overflow: hidden;
}

To learn more about this technique, please visit https://alligator.io/css/css-grid-layout-fr-unit/

Check out the JSFiddle Demo here: https://jsfiddle.net/xskrtfgq/

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

Generating PDFs in Grails using bootstrap.cssWould you like to know how to create

I am currently developing a project using Grails-5. My goal is to export data in PDF format, and I have been utilizing the rendering plugin for this purpose. Everything was going smoothly until I encountered an issue when trying to include boostrap.css in ...

intellij-ideagrailsgroovybootstrap-4bootstrap-5

Ways to time animations differently and activate two animations at the same time in every loop

I have 3 hidden text boxes that I want to fade in and slide down simultaneously by 40px when the DOM loads. They should be staggered so that each one triggers after the previous animation finishes. Below is the relevant JavaScript code snippet: jQuery(fu ...

javascriptjqueryhtmlcssanimation

Combining two images using HTML and CSS resulted in conflicts when attempting to overlay any additional elements

I have managed to overlay two images successfully, but I am experiencing conflicts when trying to do the same with other div images. Here is the code on jsfiddle: https://jsfiddle.net/cLew1t2v/ and here is the code snippet: <div> <div style ...

htmlcss

Is it necessary to restart the IIS Site when altering the contents of index.html?

I am currently working on updating a website that runs on a Custom Designed CMS with files using the .asp extension. The site seems to be quite dated and is hosted on an IIS Server, which I do not have direct access to. The user has requested some changes ...

htmlcssiiscontent-management-system

Is there a way to incorporate page animations when utilizing the <a href> tag in HTML?

I have created several HTML files. On the main page, I simply inserted some code like this: <a href="new.html> <img src="img/button" id="buttonid"> </a> When I click the button, it takes me to the new.html page. I would like ...

javascriptjquerycsshtml

Sub menus are not appearing in the drop-down menu

Below is the code for my dropdown button with an additional level. Initially, the button works as intended. However, upon attempting to click within the dropdown submenu, I noticed that all four items displayed the same last submenu only. .icon-cadet-l ...

htmlcsscss-selectors

Is there a way to adjust the transparency of specific text when clicking on a different div?

How can I display a line of text when the "Contact Us" button is clicked on a practice website, similar to this: https://i.sstatic.net/MgbYQ.png I have set the current opacity of the submit message to 0 so it is hidden, but is there a way to change its o ...

jquerycss

The validation feature in 1000hz Bootstrap seems to be malfunctioning

I've been working on implementing validation using the 1000hz bootstrap validation plugin. Most things are going smoothly, but I'm encountering two issues: 1). The data-match attribute doesn't seem to be working even when I enter the same p ...

javascriptjquerytwitter-bootstrapvalidationemail

Creating a Star Rating system with jQuery using a dropdown menu for multiple selections

Recently, I came across a simple jQuery Star rating system that I want to implement on my website. I have been following the code from http://jsfiddle.net/, and it works perfectly for one star rating system. However, I have multiple star rating systems on ...

javascriptjqueryhtmlcss

Tips for eliminating the ripple effect when clicking on a q-list item

I have managed to create a sleek sidebar with a curved edge that seamlessly integrates into the body of the page. However, I am struggling to remove the semi-transparent ripple effect that appears when clicking on a list item. The current effect clashes ...

cssvue.jsquasar-frameworkquasar

Can a partially see-through front color be placed on top of an image?

My goal is to add a foreground color with opacity over some images within a div, allowing the image to still be visible. I've come across solutions on S.O., like this one, but they don't quite achieve what I'm looking for. Below is my HTML ...

htmlcss

Move the grid items to their new positions with animation

I have a group of floating elements, all the same size and arranged within a grid layout. I am now adding a new element using jQuery's .after() method, which is larger in size and spans the entire width of the container, necessitating its own row. T ...

jquerycssinsertgrid-layout

I'm trying to create a transparent v-card, but for some reason it's not turning out the way I want

How can I make the v-card transparent while keeping its content opaque using CSS? card.vue <v-card class="cardColor"> <v-card-text> TEXT </v-card-text> <v-card-actions> <v-btn color="prima ...

javascriptcssvue.jsvuetify.js

Is it possible for me to adjust these two images to fit the screen perfectly?

Technologies: CSS React JPG/PNG Objective: I am striving to resize two images to achieve this desired look: https://i.stack.imgur.com/B1b0h.png I am currently developing a 'skirt customizer' for either my mom or portfolio, where users can m ...

htmlcssimage

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code: @tailwind base; @tailwind components; @tailwind utilities; I am currently implementing a text editing feature u ...

cssckeditortailwind-cssckeditor5laravel-10

Tips for personalizing text and icon colors in the TableSortText element of Material-ui

My Goal: I aim to empower users with the ability to apply customized styles to my EnhancedTable component by utilizing a styles object containing properties like headCellColor, headCellBackgroundColor, bodyCellColor, bodyCellBackgroundColor, and more. The ...

javascripthtmlcssreactjsmaterial-ui

Guide to placing the Drawer component beneath the AppBar in Material-UI

Exploring the capabilities of the Material UI drawer component, I'm looking to position the drawer below the appbar. My goal is to have the hamburger icon toggle the drawer open and closed when clicked: opening the drawer downwards without moving the ...

javascriptcssreactjsmaterial-ui

Slow execution of Bootstrap v4 modal display

It has come to my attention that the modals in Bootstrap show slower as the page's content increases. When the page is empty, it only takes less than 100ms to show. However, the time it takes significantly increases as more content is added to the pa ...

javascriptbootstrap-4bootstrap-modal

an online platform design

I am currently working on building a webpage, but I am facing some issues with the layout. Specifically, I am unable to make the div automatically adjust its size (particularly the height). Here is the code that demonstrates the problem: <!DOCTYPE html ...

htmlcss

Emphasize the checkbox

In my table, I have radio buttons that should turn the neighboring cell green when clicked. Using JQuery, I added a "highlight" class on $.change event to achieve this effect. However, I encountered an issue where some radio buttons load with the "checked ...

jquerycsshighlight