Transform a list element into three separate rows using Bootstrap

I need assistance wrapping a list of elements into 3 columns using a single <ul>

Here is a visual representation of what I am aiming for:

https://i.sstatic.net/dptO2.png

<ul class="list-group list-group-flush row-cols-3">
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
</ul>

I attempted to use row-cols-3 but it did not produce the desired result.

Currently, it looks like this: https://i.sstatic.net/AGtfE.png

UPDATE

First Attempt:

https://i.sstatic.net/csI0x.png

Second Attempt:

https://i.sstatic.net/LEmFK.png

Third Attempt:

https://i.sstatic.net/tlR9Y.png

htmlcssbootstrap-5

Answer №1

Check out this handy solution from the helpful folks at https://getbootstrap.com/docs/5.0/components/list-group/#horizontal and shoutout to @fabio.sang's insightful comment on How to specify an element after which to wrap in css flexbox?. I've included some additional li elements for testing purposes.

li {
  flex-basis: 33%;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565100b150b07">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7f9e7eb">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<ul class="list-group list-group-horizontal flex-wrap">
  <li class="list-group-item">Lorem Ipsum</li>
  <li class="list-group-item">Lorem Ipsum</li>
  <li class="list-group-item">Lorem Ipsum</li>
  <li class="list-group-item">Lorem Ipsum</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Answer №2

This method ensures that the border, rows, and columns are all aligned perfectly.

<ul class="list-group list-group-horizontal row">
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
</ul>

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

Is your Z-Index failing to make an impact?

Currently, I am attempting to layer divs on top of a background image. All the elements have designated position attributes, and I have applied a 50% opacity to the background image so that what's behind it is partially visible. Despite setting the z- ...

javascriptjqueryhtmlcss

modify the final attribute's value

Hello I've been using skrollr js to create a parallax website. However, the issue arises when determining the section height, as it depends on the content within. My goal is to locate the last attribute and adjust the number value based on the section ...

javascriptjqueryhtmlcss

Plotly Express Unleashes the Power of Subplots

After spending countless hours scouring the internet, I am feeling utterly frustrated and perplexed about how to deal with subplots using plotly express in Python. The concept is to create a line plot alongside a scatter plot and another line plot, where ...

pythonhtmlplotlysubplotplotly-python

Switching the position to fixed causes it to lose its justification functionality

My goal is to create a table using div elements. However, when I set the header to have a fixed position to prevent it from disappearing when scrolling through more data, all the header cells shift to the right. I attempted to adjust the margin-left proper ...

htmlcss

"Discrepancy between default checkbox and its current state

Currently, I am facing a challenge with setting the defaultChecked value of a checkbox to match the value stored in my database. Despite having the correct boolean value in the database, the defaultChecked always ends up being false. Here is how I have ta ...

htmlreactjsreact-hookscheckbox

Does the browser detect the HTML version of the document?

I discovered that my HTML 4 document successfully utilized the required attribute from HTML 5, displaying a red error border when an input was left empty. It seems like the browser interpreted the document as HTML 5 and disregarded the DOCTYPE declaration. ...

htmlgoogle-chromehtml4

Creating a unique custom shape for Bootstrap navigation bar

I'm looking to create a unique custom navigation bar shape inspired by the image attached below. https://i.sstatic.net/G7iIV.png To achieve this shape, I've utilized the following CSS: .navbar-nav.nav-bar-custom { transform: skew(-21deg); ...

csshtmlbootstrap-4

Modifying placeholder text styling using jQuery for font and color changes

I have a form with an input field like this: <input type="text" name="firstname" id="firstname" placeholder="First name"> Initially, I am checking if the input field is empty using jQuery: $("#submitreg").click(function(e){ if ($.trim($("#fi ...

jqueryhtmlformsinput

Angular displays error ERR_UNKNOWN_URL_SCHEME when attempting to retrieve an image saved in a blob

As I transition my app from Electron to Angular, one of my main objectives is to display an image uploaded by a user. Here's how I attempted to achieve this: page.component.ts uploadImageFile(){ fileDialog({}, files =>{ //Utilizing the fileDi ...

javascripthtmlangulartypescript

Tips for maintaining grid width when columns are rearranged in the column menu

Is it possible to stop jqgrid from changing its width to full screen after column selection? I attempted the code below, following guidance from How to change column name in column chooser pop up in jqgrid? My aim was to create a column switcher function ...

jqueryhtmlcssjqgridfree-jqgrid

Guide on implementing themes to HTML within the append() function

I am currently working on a project where I need to dynamically add HTML tags using JavaScript. However, I have noticed that the themes or styles are not being applied to the newly added elements within the append method. In my HTML file, I am using jQue ...

javascriptjqueryhtmlcssjquery-mobile

What is the best way to add data from an array to a DOM element in the same order it was retrieved from Firebase?

Utilizing Google Firebase Firestore for data storage and the Open Movie Database (OMD) in combination with Axios to retrieve movie information. I am currently developing a website that allows users to add movies to collections. On the collections page, al ...

javascripthtmlcssfirebasegoogle-cloud-firestore

Full comprehension with a width of 100%

Here is an example where .flex2 has 2 children. 1st child - width: 300px 2nd child - width: 100% .b{ height: 50px; } .flex2{ margin-top: 20px; display: flex; .box{ background-color: blue; width: 300px; } .box1{ backgroun ...

css

Expand Bootstrap navbar search box outside collapse menu

Currently, I am working on designing a navigation bar that showcases my brand on the left side, a full-width search bar in the center, and additional pages on the right. I am facing challenges in maintaining the full-width of the search bar without causing ...

htmlcsstwitter-bootstrap

Cut off text in a dropdown button using Bootstrap 4

I'm encountering an issue with a dropdown button where the text is a combination of a fixed part and a variable part from a database. The variable text can be long, so I need to truncate it. In order to apply bootstrap's .text-truncate class (or ...

cssbootstrap-4

Why is the radio button getting bound to the error instead of the label?

I'm currently working on validating radio buttons in a GSP file using the jQuery validation plugin. The issue I'm facing is that the error message is being bound to the first radio button and appearing at the bottom of it. Instead of displaying ...

jquerycssgsp

Tips for dynamically modifying style mode in Vue.js

I am looking to implement a feature where the style can be changed upon clicking a button. In my scenario, I am using Sass/SCSS for styling. For example, I have three different styles: default.scss, dark.scss, and system.scss. The code for dark.scss look ...

javascriptcsstypescriptvue.jssass

Horizontal image scrolling problem across different browsers

Check out my Fiddle. I'm having trouble with scrolling on different browsers. In Chrome, the scroll behaves as expected and stops when the content ends. However, in Firefox, it keeps scrolling even after reaching the end despite setting a fixed width ...

jqueryhtmlcssscroll

What is the process for altering the color of an HTML output depending on its values?

I created a simple HTML code to showcase some outcomes. The possible results are SUCCESS, Failure, and Still Failing. I want these results to be displayed with corresponding colors, such as green for SUCCESS, and red for both Failure and Still Failing. I ...

javascriptjqueryhtmlcss

Flexbox grid implementation for a stylish Bootstrap 4 masonry layout

Can a masonry column layout be achieved using the flexbox grid provided by Bootstrap 4? It appears that all the columns have the same height. ...

cssflexboxbootstrap-4css-multicolumn-layout