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 update Checkbox changes within a Datagrid without selecting the entire row?

My Table Cell Checkbox Behavior Issue: Within a table cell, I have a checkbox that changes upon clicking it. However, the change only occurs the first time. Subsequent clicks on the same checkbox do not trigger any change until I click outside the cell. T ...

javascriptreactjstypescriptmaterial-uimui-x

Discover the element's selector for the event that was triggered using jQuery

In the process of creating a lightweight real-time application, we are utilizing jQuery's event system to facilitate communication between modules. Any changes made in the DOM that affect elements outside the module are achieved through triggering eve ...

javascriptjquerynode.jsjquery-selectors

What is the best way to gather user input and incorporate it into a selected template, ensuring it is verified before sending?

I'm in the process of developing a project that involves gathering user input through a collector and displaying it on my template for verification before sending it out. The format I'm aiming for can be seen here: This is the template format I ...

javascriptnode.jsdiscorddiscord.js

Generate a responsive list with a pop-up feature under each item (using Vue.js)

Currently, I believe that Vue may not be necessary since most tasks can be done using JavaScript and CSS. I am attempting to design a list layout as follows: [A] [B] [C] [D] When an item is clicked, the information about that specific item should ...

javascripthtmlcssvue.js

Interactive radio button selection with dynamic image swapping feature

I'm currently working on creating a radio list with three options: Salad Spaghetti Ice cream This is how I coded it: <div id="radiobuttons"> <label><input name="vf" type="radio" value="0" checked/>Salad</label> < ...

javascriptjqueryhtml

"Why is it that the keypress event doesn't function properly when using the on() method

My goal is to capture the enter event for an input field $("input[name='search']").on("keypress", function(e){ if (e.which == '13') { alert('code'); } }); This is the HTML code snippet: <input name="searc ...

javascriptjquery

Using a forward slash in the path for the href attribute in a CSS link within an ejs file

Image 1: Configuring express.static for the public folder Image 2: Adding href="/app.css" in post.ejs file Image 3: Final result While experimenting with using /app.css and app.css in the post.ejs file, I noticed that the outcome was consistent with th ...

cssnode.jshttpexpressejs

Modify mesh in three.js scene

Is there a way to dynamically change a mesh in a group triggered by a button click? I am loading an external .obj file: loader.load( obj, function ( object ) { createScene( object, mod.tipo, pid, cor.replace("#","0x") ); }); and adding it to a gro ...

javascriptthree.js

Guide on toggling visibility of a column in Material-ui based on a conditional statement

Can someone help me with code that allows me to hide or show the TableCell based on an if statement? I am currently working with MATERIAL-UI framework which can be found here: https://material-ui.com/ <TableBody> {Object.entries(servicesCode).map ...

javascriptreactjsmaterial-uishow-hide

How can I implement a feature to automatically close a drawer in a React application using the Material UI

Currently, I am utilizing a React material design theme However, I am facing an issue where the drawer navigation button on mobile view does not close automatically upon clicking I need something like (onClick={handleClose}) to resolve this problem Does ...

javascriptreactjsreact-native

The orientation of Bootstrap flex - horizontal row or vertical column -

Bootstrap operates based on the class assigned to the parent element for flex row/column behavior. .bd-highlight { background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .15); } <link href="https://stackpath.bootstrapcdn.co ...

cssflexboxbootstrap-4

Narrow down product selection by multiple categories

I'm currently in the process of working with Express and MongoDB, where I have data items structured like the following: { "_id": { "$oid": "63107332e573393f34cb4fc6" }, "title": "Eiffel tower&quo ...

javascriptnode.jsmongodbexpress

The Body Parser is having trouble reading information from the form

I'm struggling to understand where I'm going wrong in this situation. My issue revolves around rendering a form using a GET request and attempting to then parse the data into a POST request to display it as JSON. app.get('/search', (re ...

javascriptjsonexpresspugbody-parser

Encountering issues with link functionality on homepage due to React-Router v6 and Material-UI Tab integration

I'm currently working on a homepage that requires different page links. Below you can find the necessary code snippet for setting up the tabs and routes for each page: <li> The tabs are located here - <Link to="/demo">D ...

javascriptreactjsreact-routermaterial-uireact-router-dom

Using React-router for server-side rendering and loading data with ajax calls

Currently I am working on implementing react-router in my project, but I seem to be facing some major concept misunderstandings. There are certain components in my application that require fetching data from the server. Previously, I used the following cod ...

javascriptajaxreactjsreact-router

Custom Bootstrap 3 Panel Organization

I'm intrigued by the layout shown in the image attached. My attempts to recreate it using a combination of columns and rows have been unsuccessful. Could it be that I'm going about this the wrong way? ...

csstwitter-bootstraplayoutpanel

The binding in Knockoutjs is working properly, but for some reason the href attribute in the anchor tag is not redirecting to

Here is the HTML code snippet I am working with: <ul class="nav nav-tabs ilia-cat-nav" data-toggle="dropdown" data-bind="foreach : Items" style="margin-top:-30px"> <li role="presentation" data-bind="attr : {'data-id' : ID , 'da ...

javascripthtmlknockout.js

Creating personalized validation for an AJAX popup in the MVC framework

In my MVC project, I am trying to implement AJAX popup with custom validation. I have created a CustomValidator class and overridden the IsValid() method. However, I am facing an issue where the custom validations are not rendering correctly within the pop ...

javascriptjqueryajaxasp.net-mvcvalidation

Analyzing two strings as dates within Selenium

Currently, I am utilizing <tr> <td>storeEval</td> <td>var d=new Date(); d.getDate()+'-'+((d.getMonth()+1)) +'-'+d.getFullYear();</td> <td>date2</td> </tr> <tr> ...

javascriptselenium

iPad problem resolved: Disable click hover and double-click issue

I'm experiencing a problem with my web application specifically on Safari for iPad. I have to click twice in order to actually perform the click on the <a> tag. The first click triggers a hover effect, similar to when you hover with a mouse on d ...

javascriptangularjshovermobile-safari