What's the most effective method for dividing a list into columns?

I attempted to organize my list into 4 columns using Bootstrap's grid system, but it feels somewhat unconventional. Is there a more efficient method to achieve this layout?

This is the approach I took:

<div class="grid">
    <ul class="list-group">
        <div class="row">
            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
                <li class="list-group-item">3</li>
            </div>

            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2f</li>
                <li class="list-group-item">3</li>
            </div>
            
            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
            </div>
            
            <div class="col">                
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
            </div>
        </div>
    </ul>
</div>

I am hoping to achieve the desired layout without the need for additional div tags. Is this possible?

htmlcsslistbootstrap-5html-lists

Answer №1

To achieve this layout, consider utilizing the CSS columns property:

ul {
  columns: 4;
}


ul {
  columns: 4;
}
<div class="grid">
  <ul class="list-group">
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
    <li class="list-group-item">3</li>
    <li class="list-group-item">1</li>
    <li class="list-group-item">2f</li>
    <li class="list-group-item">3</li>
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>             
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
  </ul>
</div>

Keep in mind that inserting divs between list items is not supported.

UPDATE: If you require two items in the last two columns, columns may not work. Instead of using divs, you can consider arranging list items in a grid using selectors like nth-child based on the number of list items anticipated.

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

Can you provide instructions on how to display data in two lines within a mat-select field?

Is it possible to show selected options in mat-select with long strings in two lines within the same dropdown? Currently, the string appears incomplete. You can see an example of this issue here: incomplete string example <mat-form-field class="f ...

javascripthtmlcssangular

The ball refuses to fall into the designated boxes

I designed a basic webpage featuring 3 boxes that, when clicked on, trigger the dropping of a ball into them. Below is the code I used: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function popup (n) { ...

javascripthtmlcss

Update the section tag upon submission using jQuery on a jQuery Mobile HTML page

I have integrated a jquerymobile template into Dreamweaver 6.0 to create a mobile app interface. The home screen features four buttons - specifically, View, Create, Update, Delete. Upon clicking the Create button, a new screen is opened (each screen corres ...

javascriptjqueryajaxhtmljquery-mobile

Tips for CSS and jQuery: Show link when hovered over and switch the visibility of a content div

I'm facing an issue with a link in the horizontal navigation bar. When a user hovers over it, I want another div to slide down just below it. The problem is that using the .toggle method doesn't work as expected. It continuously toggles the div e ...

jquerycss

A guide on restricting overflow in React Spring Parallax 'pages'

Currently, I have integrated React Spring Parallax () into my project found at this link: https://codesandbox.io/s/parallax-sticky-scroll-2zd58?file=/src/App.js Upon clicking the button to navigate to the next section, it is noticeable that the image over ...

cssreactjsparallaxreact-spring

Guide on updating a table with query parameters in Html Agility Pack using C#

Struggling with parsing this URL using the Html Agility Pack: " The default table that shows up is always based on the closest contract date and the current date. I can parse the entire page without any issues, but when I try to request a different date ...

htmlhtml-parsinghtml-agility-pack

When the page is refreshed, the value bounces back and forth between

I've encountered a strange issue on my page with 6 textboxes. Whenever I enter values into these text boxes and then refresh the page, the values seem to jump to the next textbox (the one after the next). For example, if I enter values as follows: [ ...

htmlfirefoxinput

Sending data from Angular to the DOM

Is there a way to dynamically pass a property to an HTML tag using Angular? <div class="my-class" data-start="10"> I am trying to figure out how to pass the value of data-start dynamically. This is for an Angular 5 application. Any advice would be ...

htmlangularangular-directive

Utilize Python (specifically with the Pillow library) to remove transparent backgrounds

When using the python module html2image to convert html to an image, I encountered an issue with fixed image size causing the html to break or get cut off, leaving a blank space. Is there a Python-based solution to fix this problem? (I am using chat export ...

pythonhtmlimagediscordpython-imaging-library

How can the input value be transmitted along with the formArray values?

I am currently working with a FormArray in my project where I can add new fields and submit the entire form data on button click. However, I am facing an issue trying to display and send an input field that is connected to the 'name' attribute wi ...

htmlangulartypescriptinput

Guide to dynamically refreshing a section of the webpage while fetching data from the database

I'm currently developing a website using PHP & MySQL where some queries return multiple records. Each record has its own dedicated page, allowing users to navigate between them using arrows. So far, everything is working smoothly. However, I've ...

phpjqueryhtmlmysqlcss

Using the Jquery validation plugin for Internet Explorer 9 when the website first loads

Our website is currently using Jquery v1.9.0 and jquery validation plugin v1.10.0. The form on our site consists of two text boxes and a submit button. When the submit button is clicked, the input elements are validated and a JavaScript function is trigger ...

javascriptjqueryhtmlvalidationinternet-explorer

Ensuring uniformity in picture size while uploading images in Angular by resizing and including white borders

Currently, I am working with pictograms and I am looking to showcase all the pictograms that the user has in both grid list and grid tiles formats. However, the challenge lies in the fact that the aspect ratio of the pictograms varies significantly depen ...

htmlcssangular

Ensure that PHP form validations are checked when submitting the form using jQuery

I have created a form in HTML with basic verification. Here is the code: <form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form"> <input class="form- ...

javascripthtmljquery

Add a specific CSS class to a div element depending on the status of a checkbox

Is there a way to dynamically append data based on the selected items in a checkbox table? I want to be able to add multiple or single items by clicking the add button. The key is to avoid appending duplicate data that already exists in the view. Any sugge ...

javascripthtmljquery

Incorporating a full-page background into a specific view using AngularJS

In order to implement a fullscreen CSS background for a specific view in my app, I attempted adding a class to the body. However, this approach caused the background to persist in the cache and remain visible when switching views. The challenge arises fro ...

javascriptjquerycssangularjs

How can you correctly include a link to a plain text sitemap file in an HTML document?

Could this code effectively inform Google to index my sitemap (or acknowledge its presence)? <link rel="sitemap" href="./sitemap.txt" type="text/plain" title="Sitemap" /> Google's guidelines allow plain t ...

htmlseometa-tagssitemapgoogle-search

I am unable to retrieve data using JavaScript

I am struggling to fetch data with JavaScript and display it in the console. Can anyone point out what I might be doing incorrectly? main.js // ADD TO CART $("#addToCartBtn").on('click',function(){ var _qty=$("#productQty") ...

javascripthtmldjangodjango-templates

Find the maximum value while excluding any numbers with two or more

In my code, I have created a simple program that identifies the largest number, smallest number, and count of numbers inputted before pressing the 'E' key. However, there seems to be an issue with the 'max()' function as it fails to con ...

pythonlistmax

The current_time() function displayed an incorrect time value

When I utilized the current_time() function in PHP to retrieve the current time, it displayed an incorrect time. Instead of the correct time, it is showing 12 hours and 30 minutes earlier than the actual current time, even after modifying the php.ini file ...

phphtmlmysql