What is the proper way to enable card wrapping within list groups?

I am currently exploring ways to make cards within a list group wrap if there is not enough space. For instance, if I have 4 cards in a list group all set to 25% width, how can I ensure that the fifth card appears on the row below?

While researching this issue online, I found some solutions that seem inefficient, such as using a second group list.

<div class="list-group-item active text-light w-25">
    <h5 class="mb-1">text</h5>
    <p class="mb-1">text</p>
</div>

My expectation is for the cards to wrap once more than 4 are shown, but it should also be able to accommodate up to 8 cards in a single row.

htmlcssbootstrap-4

Answer №1

It appears that achieving this in bootstrap 4 may not be possible. Feel free to correct me if I'm wrong, but it seems like a limitation of the framework. You might want to consider using JavaScript as an alternative solution.

Answer №2

Expanding on my previous input, here is a code snippet that arranges 4 cards in a row and adapts to different screen sizes. Each card occupies 3 grid spaces on large screens, 6 on medium screens, and 12 on small screens for better responsiveness. Feel free to customize the grid spacing based on your needs.

<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 py-2">
  <div class="row"> 
    <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 mb-1"><div class="card p-5">Card 1</div></div>
    <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 mb-1"><div class="card p-5">Card 2</div></div>
    <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 mb-1"><div class="card p-5">Card 3</div></div>
    <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 mb-1"><div class="card p-5">Card 4</div></div>
    <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 mb-1"><div class="card p-5">Card 5</div></div>
    <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 mb-1"><div class="card p-5">Card 6</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

Designing a patterned rectangle filled with stylish text

I am relatively new to the world of HTML and CSS, and I am encountering a specific challenge with CSS. My goal is to design a section that looks like this: ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- The ma ...

htmlcsssass

File uploading feature in Bootstrap (without the need for Javascript)

While I've seen this question posted in a similar style before, one critical point (in my opinion) hasn't been addressed - is there a way to achieve this without using JavaScript? On mobile devices, overscripted sites can sometimes have non-worki ...

htmlcsstwitter-bootstrap

Using CSS to create a transition effect for fading in and out background images

I created a website with a captivating full-page background image (img/bg_start.jpg): If you hover your mouse over the central animal on the page, the current image (img/bg_start.jpg) will fade out and be replaced with another picture (img/bg_start2.jpg) ...

javascriptjquerycss

Having trouble with the fancybox form

Take a look at this link for information on how to display a login form. Once you click on "Try now", follow these steps: A fancy box should open with fields for name and password. If both fields are left blank and the login button is clicked, an error ...

jqueryhtmlfancyboxfancybox-3

Position <UL> at the center of <DIV>

I've attempted several solutions found on Stack Overflow to center my <UL> element, but nothing seems to work. Can someone please take a look at it? I am looking to center the text "Shop 943 01 ... not available". Thank you in advance. ...

html

Pressing a button to alter the text color

While experimenting, I attempted to alter the text color of my HTML using JavaScript. After a few attempts, I came to the realization that I cannot change the color if I am already changing it in CSS. Does this mean CSS is executed at the end? Also, how ca ...

javascripthtmlcss

CSS: The deleted style refuses to disappear

Despite removing CSS code from my Rails application, after restarting the server and refreshing the page, I still see that the code is in effect. Even when inspecting the elements using Chrome, the code remains visible. @media screen and (min-width: 961px ...

cssruby-on-railsrubybrowser-cache

Which software is recommended for converting Sass to CSS on a Linux operating system?

Just starting out with Sass and I've run into a snag. Currently following a tutorial that utilizes Scout as the Sass compiler for generating CSS. The issue is that Scout is compatible only with Windows and Mac, while I work on Ubuntu Linux. Any reco ...

csssassfrontend

Show fixed div at specific height

Is there a way to have a fixed title in a DIV that only displays once the user scrolls to the relevant section on the website? I'm looking for a solution where the DIV is hidden until the section is reached during scrolling. ...

javascriptjquerycss

Preserving data and retrieving it

I've been working on a program for my diving coach that calculates the dive score as judges input their judgments. However, I'm encountering an issue where all fields clear themselves when I hit submit. Moreover, I'd like the ability to save ...

phphtmlvariables

unitary incline division assemblage

I noticed a particular element in the design that is currently displayed with an image (png). However, I am facing limitations due to needing to make it adaptive. Can a gradient be used as a sub-element instead? background-image: linear-gradient(to left, ...

csslinear-gradients

Fulfill the promise within the function upon clicking the button

I've created an intricate 'slideshow' using popups within a vue.js template. Each slide is a separate component, and the parent component cycles through them in a 'for' loop. Users navigate from one slide to the next by clicking a ...

javascripthtmlvue.jsdom

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

I am currently in the process of developing a web-based application using Bootstrap. My goal is to save a .aspx page as an HTML file within my application. Upon writing the code: using System; using System.Collections.Generic; using System.Linq; using S ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unusual problem arises with the positioning of widgets in Blogspot due to the use of CSS `position

Recently, I implemented a new widget on my blog called , which functions as a menu using the "Add HTML/Script" feature. Below is the HTML/CSS code for the widget: .menukadn { line-height: 1; } a.limeka, a.limeka:visited, a.limeka:active { font-family: ...

cssgoogle-chromewidgetbloggercss-position

Adjust the alignment of the text to match the orientation of the image

When creating a layout with text and an image, I want them to be contained within a parent element that has a specified height, such as 100px. The text should adjust to the content, whether it's a short phrase or a lengthy paragraph, without a fixed ...

htmlcss

Tinymce editor does not display icons as expected

I am attempting to create a custom styled list that is editable with tinymce. The list-items are using Material-Check-Icons as bullet-points, which are added as css-pseudo-elements ::before. This setup works well, but when I integrate tinymce (v5) into the ...

javascriptcsstinymce

Leveraging ng-class with multiple conditions

My goal is to assign one of three different classes to a span element based on the result of a JavaScript function. The code snippet I have written appears to be returning the correct value, but the markup always displays the 'require-matched' cl ...

javascripthtmlangularjs

Can a TypeScript variable in Angular contain a mixture of HTML and plain text?

I have a website where I am displaying content from a Model file. I would like to create a TypeScript variable that contains both a string related to the website's content and a URL enclosed in an HTML tag. When this variable is rendered on the view, ...

htmlangulartypescript

Issue with Dropdown Menu functionality while using multiple dropdown options

I am currently experimenting with dropdown menus from W3Schools and have encountered an issue when trying to implement two dropdown options. The code works fine for a single dropdown, but when I try to add a second one using GetElementsByClassName instead ...

javascripthtmlcsstwitter-bootstrap

What is the best way to seamlessly integrate an image icon into a sentence, so it appears as a natural part of the text

I'm struggling to insert an (i) information icon before the phrase "Learn more" in the sentence: "Click on the 'Learn more' buttons for additional information." The icon keeps overlapping with the words "Learn more." Could someone provide s ...

htmlcss