Reorganize items that extend beyond the list into the next column using Bootstrap

I have a row with two columns, where Column 1 currently contains 7 list items under the ul tag.

However, I want to display only 5 list items in Column 1 and automatically move the remaining items to the next column (i.e., Column 2).

Is there a way to achieve this dynamic movement of list items to the next column based on a count (e.g., 5) using only HTML and CSS, without any third-party libraries like jQuery?

Current Snippet:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="row">
 <div class="col-xs-4 mr-4">
 <ul class="list-group">
  <li class="list-group-item">List Item 1</li>
  <li class="list-group-item">List Item 2</li>
  <li class="list-group-item">List Item 3</li>
  <li class="list-group-item">List Item 4</li>
  <li class="list-group-item">List Item 5</li>
  <li class="list-group-item">List Item 6</li>
  <li class="list-group-item">List Item 7</li>
</ul>
 </div>
  <div class="col-xs-4 mr-4">
 Column-2
 </div>
 </div>
</div>

Expected Result:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
     <div class="row">
     <div class="col-xs-4 mr-4">
     <ul class="list-group">
       <li class="list-group-item">List Item 1</li>
       <li class="list-group-item">List Item 2</li>
       <li class="list-group-item">List Item 3</li>
       <li class="list-group-item">List Item 4</li>
       <li class="list-group-item">List Item 5</li>
    </ul>
     </div>
      <div class="col-xs-4 mr-4">
     <ul class="list-group">
       <li class="list-group-item">List Item 6</li>
       <li class="list-group-item">List Item 7</li>
    </ul>
     </div>
     </div>
    </div>

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Transferring elements between different DOM containers using only CSS is not achievable.

However, it is possible to modify the layout behavior within a single container by utilizing CSS-Grid, which allows for dynamic adjustments without the need for a fixed height, thanks to the explicit and implicit grid systems.

ul.list-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap:1em;
  grid-auto-flow: column;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-4 mr-4">
      <ul class="list-group">
        <li class="list-group-item">List Item 1</li>
        <li class="list-group-item">List Item 2</li>
        <li class="list-group-item">List Item 3</li>
        <li class="list-group-item">List Item 4</li>
        <li class="list-group-item">List Item 5</li>
        <li class="list-group-item">List Item 6</li>
        <li class="list-group-item">List Item 7</li>
        <li class="list-group-item">List Item 8</li>
        <li class="list-group-item">List Item 9</li>
        <li class="list-group-item">List Item 10</li>
      </ul>
    </div>
  </div>
</div>

Answer №2

To achieve the desired layout using flexbox, ensure that both the flex container (designated as .list-group in this scenario) and the flex items (.list-group-item) have specified heights for proper wrapping.

As a side note, it is advisable to use col instead of col-xs with Bootstrap 4.

.list-group {
  height: 200px;
}

.list-group-item {
  height: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-4 mr-4">
    <ul class="list-group d-flex flex-column flex-wrap">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </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

Is there a way to extract a variable value from an external webpage in order to manipulate

Although I am not well-versed in PHP, I believe it may be the most suitable solution for achieving my goal. I want to extract the value of a variable from an external page in order to process it for generating graphs and statistics on my own webpage. The s ...

phphtmlvariablespostget

Angular 5's external JavaScript library

After thoroughly researching this subject, I find myself still lacking comprehension. An example may be the key to understanding. As a newcomer to Angular, my goal is to create a mathematical application for mobile using Ionic. Despite investing two weeks ...

javascriptangular

Troubleshooting problem in Java related to encoding with XMLHttpRequest

Currently, I am utilizing XMLHttpRequest for an ajax call to my server. Let's consider the call: http = new XMLHTTPRequest(); var url = "http://app:8080/search.action?value=ñ" http.open("GET",url,true); http.setRequestHeader("Content-type", "applica ...

javascriptjavaajaxencodingcharacter-encoding

How can I manage the asynchronicity of Hapi.js, fs.readFile, fs.writeFile, and childProcess.exec?

My code execution seems to be resulting in an empty list, could it be that my asynchronous calls are incorrect? I've tried rearranging and breaking things into functions but there still seems to be a timing issue with my execution. The order in which ...

javascriptnode.jsasynchronoushapi.js

Remove the JSON object by comparing IDs between two JSON objects in JavaScript or Node.js, deleting it if the ID is not found

let data = fetchData(); let anotherData = getAnotherData(); let result = data.reduce((accumulator, current) => { if (!accumulator[current.system.name]) { accumulator[current.system.name] = {}; } let detailsObject = {}; Object.keys(current. ...

javascriptnode.jsnodes

Tips for integrating new channels and categories using a Discord bot

Hey there! I'm trying to add channels and categories, but I can't seem to get the function ".createChannel" working. The console keeps telling me that the function doesn't exist. I've been referencing the documentation at https://discor ...

javascriptdiscord.js

The information is not being shown. Error: API expression GET is not possible

import express from 'express'; import data from './data'; const app = express(); app.get("/api/products", (req, res) => { res.send(data.products); }); app.listen(5500, () => {console.log("The server has been successfully s ...

javascriptreactjsapiexpressget

Increase the gap between the legend and the chart when utilizing charts.js

I'm currently working on a project using charts.js and running into a slight issue. The legend for my bar chart is overlapping with the values displayed. I've been attempting to troubleshoot this problem without much success so far, so I would g ...

javascriptchart.js

The equivalent of e.preventDefault() in Java (for Android) is to replace the typed text

I am working on a jQuery/JavaScript function that will replace any text typed in an input field with a specific text. Here is the code snippet: $('input').on('keydown', function(e){ e.preventDefault(); count++; if (count == ...

javajavascriptandroidjquery

The result of Document.getElementById can show as "undefined" despite the presence of the element

Currently, I am tackling a project that involves extracting information from a website. I have opted to use the 'puppeteer' library in Node.Js for this task. However, I am encountering an issue where Document.getElementById is returning "undefine ...

javascriptnode.jsparsingdompuppeteer

"Utilize Angular's $http options for requesting instead of using

When I attempt to send a $http POST request to a server API, the request method unexpectedly changes to OPTIONS. Strangely, this issue only occurs when working with localhost. To troubleshoot, I tried making the same request using Postman and it worked fla ...

javascriptangularjsapihttppost

Designing scroll boxes that are not continuous and tracking the time spent in each section

I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them. Specifically, I aim to design a scroll box featuring two p ...

javascriptjqueryhtmlcss

Tips on resolving the Hydration error in localStorage while using Next.js

Having issues persisting context using localStorage in a Next.js project, resulting in hydration error upon page refresh. Any ideas on how to resolve this issue? type AppState = { name: string; salary: number; info: { email: string; departme ...

javascriptreactjsnext.js

What is the best way to format specific text as bold within an input text field?

I am attempting to make certain text bold within an input text field. However, I'm uncertain about how to achieve this because HTML code is not recognized inside a text field. Therefore, using <b> will not be effective. Is there a way to bold sp ...

javascripthtmltextinputbold

Having trouble getting BootstrapTour to work with meteor 1.4?

I've been trying to implement the flowkey:bootstrap-tour package for BootstrapTour in my meteor 1.4 app, but unfortunately it's not working as expected. Below are the code snippets I'm using: let tour = new Tour({ name: "tour", de ...

node.jstwitter-bootstrapuser-interfacemeteorbootstrap-tour

Structuring files with AJAX, PHP, Javascript, and HTML

Explaining my dilemma in detail might be a bit abstract, but I'll try to do my best. In one of my PHP files, I have HTML code that includes text boxes and a submit button. This file serves as the main page and is named mainHTML.php The text boxes ar ...

javascriptphpajax

Reactjs implemented with Material UI and redux form framework, featuring a password toggle functionality without relying on hooks

Currently, I am working on a react project where I have developed a form framework that wraps Material-UI around Redux Form. If you want to check out the sandbox for this project, you can find it here: https://codesandbox.io/s/romantic-pasteur-nmw92 For ...

javascriptreactjsmaterial-uiredux-form

Exploring ways to replicate the functionality of Gmail's Contact manager

Looking to develop a contact manager similar to Gmail's interface. While I have a basic understanding of AJAX and some experience with jQuery, my JavaScript skills are limited. Any suggestions for books or blogs to improve them would be welcome. Tha ...

javascriptajaxgmailcontacts

Having trouble with images not displaying in IE10 on HTML5 canvas?

I recently delved into learning about html5 and the canvas element, attempting to create a basic webpage that rotates an image clockwise and counterclockwise upon button clicks. Although I managed to get it working, when I tested it on ie10, only the blank ...

htmlinternet-explorercanvasinternet-explorer-10

Changing the text of a link when hovering - with a transition

Seeking a straightforward way to change text on a link upon :Hover. I desire a gentle transition (text emerges from below) and fallback to default if JavaScript is disabled. HTML <div class="bot-text"> <a href="">Visit this site</a> ...

javascriptjqueryhtmlcss