Arranging ul tags in divs horizontally side by side

I am attempting to create a <div> that contains several <ul> lists, but I seem to be having trouble getting it to work correctly. In essence, I'm trying to achieve something similar to this:

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

This is my code so far:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<table style="width:20px;">
  <tr>
    <td id="1">
      <div class=''>          
        <div class=''>
          <ul id='tog_nr-332' class='list-group list-group-flush' style='display:block;'>
            <li class='list-group-item list-group-item-primary'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-primary'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-primary'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-primary'>4421:blabla
            </li>
          </ul>
        </div> 
        <div class=''>        
          <ul id='tog_nr-332' class='list-group list-group-flush' style='display:block;'>
            <li class='list-group-item list-group-item-danger'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-danger'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-danger'>4421:blabla
            </li>
            <li class='list-group-item list-group-item-danger'>4421:blabla
            </li>
          </ul>
        </div>
      </div>
    </td>
  </tr>
</table>

htmlcssbootstrap-4

Answer №1

Take a look at this code snippet.

In the following code, I have utilized flexbox to arrange the lists within the div next to each other.

Since the default flex-direction is row, there is no need to explicitly specify it.

.list-wrapper {
  display: flex;
}
<link
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  rel="stylesheet"
/>
<div class="list-wrapper">
  <div class="">
    <ul
      id="tog_nr-332"
      class="list-group list-group-flush"
      style="display: block"
    >
      <li class="list-group-item list-group-item-primary">4421:blabla</li>
      <li class="list-group-item list-group-item-primary">4421:blabla</li>
      <li class="list-group-item list-group-item-primary">4421:blabla</li>
      <li class="list-group-item list-group-item-primary">4421:blabla</li>
    </ul>
  </div>
  <div class="">
    <ul
      id="tog_nr-332"
      class="list-group list-group-flush"
      style="display: block"
    >
      <li class="list-group-item list-group-item-danger">4421:blabla</li>
      <li class="list-group-item list-group-item-danger">4421:blabla</li>
      <li class="list-group-item list-group-item-danger">4421:blabla</li>
      <li class="list-group-item list-group-item-danger">4421:blabla</li>
    </ul>
  </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

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

javascripthtmlhtml-table

The content has spilled over from the div and leaked into the adjacent div

When the left div's content exceeds the right div's, it spills over into the next container div. Sample HTML: <div class="musictemplate_container"> <div class="musictemplate_left"> something<br> omething< ...

htmlcss

Retrieving information from the Header element (<H></H>) with the help of Selenium

I have a website with the following code snippet: <div class="list_item_normal"> <div class="main_content"> <div class="img_wrap"> <a href="/home/Detaljer/9781118093757"><img alt="Miniaturebillede af omslaget til Op ...

javahtmlcssselenium

Seeking the total number of occurrences of an xpath expression with a specific condition in PHP

CSS - <div class="container"> <p>This is a paragraph</p> </div> JavaScript - console.log('Hello, World!'); function multiply(a, b) { return a * b; } document.getElementById("demo").innerHTML = multiply(5, 3); ...

phphtmlxmlxpath

Guide to choosing and unchoosing a div / button using angularJs

I am attempting to create a functionality where items are displayed in a div instead of a list. When an item is clicked, the background color of the div changes and the item is added to a column. Clicking on the item again will revert it back to its origin ...

javascriptjqueryhtmlcssangularjs

To ensure that the first three digits of a phone number are not zeros, you can implement a JavaScript function to validate the input

I've been working on validating a phone number using JavaScript, but I've hit a roadblock. I need to ensure that the area code (first 3 numbers in 999) cannot be all zeros (0). While I know how to create the desired format (like xxx-xxx-xxxx), ...

javascripthtmlformsvalidation

Swapping out a sequence of characters in a web address with a different set

Swapping out imgur for filmot, Enter URL - https://i.stack.imgur.com/Uguvn.jpg Click the submit button After clicking submit, a new tab should open with the link .filmot.com/abcde.jpg. <html> <head> <title>input</title> <sc ...

javascripthtml

Start your slideshow automatically (with an option to toggle)

http://jsfiddle.net/r6uf38v4/ After the page loads, my goal is to have the slider begin automatically. However, I also want to provide the option for users to pause it using a checkbox and then resume the slider. $('#checkbox').change(function( ...

jquerycssslideshow

What is the best way to align individual images in the middle of their respective background containers?

As a novice coder working on a dice rolling app using React, I've hit a roadblock with a CSS problem that's proving to be quite challenging. My goal is to have a row of 6 dice, each enclosed in a background box that changes color when the React s ...

cssreactjsflexboxjsx

HTML textarea content will update automatically whenever there is an input change in JavaScript

Everything seems to be working as expected, but I noticed that the onmouseover event only triggers once. Is there a way to make it work multiple times, i.e., every time the text array changes? <html> <head> <script> function myFunct ...

javascriptcsshtml

Modify the color of the sidebar menu items in R Shiny

I am trying to find out the tag name that can be used to change the color of the blue line in the menuItem image on Shiny Dashboard. I have successfully changed the background color of the sidebar menu item using the following code: .skin-blue .main-sideb ...

cssrshinyshinydashboard

Bootstrap v5 does not automatically close the navbar

Currently utilizing Bootstrap v5 and encountering an issue with the navbar. I directly copied the code snippet from this site, but unfortunately, the navbar is not functioning as expected. The navbar opens, but upon clicking again on the button, it fails t ...

htmlcssbootstrap-5

Issue with React TSX component in NextJs 14.0.4: Local MP3 files cannot be played, only external online MP3 files work

I have created a component that wraps around HTML audio and source tags. It functions perfectly when playing mp3 files from an external source, like this sound clip . However, it returns a GET 404 error when trying to access local mp3 files. Can anyone exp ...

htmlreactjstypescriptnext.jsaudio

Embracing the flexibility of flexbox nesting

Flexbox has been a game-changer for me, and I can't help but want to incorporate it into all my projects since I first started using it. Curious Thought I'm wondering if nesting flex-boxes is considered best practice. Could having numerous, espe ...

cssperformanceresponsive-designfrontendflexbox

What is the best way to have the slide shift to the left solely after the initial click and prevent it from moving left on subsequent clicks?

Is there a way to prevent the slide area from scrolling left when the left button is clicked before it has been scrolled right first? Additionally, how can we lock the scroll after it reaches the last div? var $slider = $("#recent-container") $("#right ...

javascriptjqueryhtmlcssslide

Setting a customized background color for a designated section of a component

I am trying to create a hover effect at the position of a cursor, similar to what is shown in this example: For reference, I have also created a code snippet: https://jsfiddle.net/onnmwyhd/ Below is the code I am using: HTML <div id="container&q ...

javascriptjqueryhtmlcss

What is the best way to set the width of an iframe within a <td> element to be 33% of the screen?

I am facing an issue with scaling an iframe dynamically inside a <td> element. My goal is to make the iframe occupy 33% of the screen width while automatically adjusting its height. Here is what I have tried: <iframe src="google drive presentati ...

htmlcssiframe

Enhance your SVG image in D3 by incorporating a drop-shadow effect

Trying to apply a drop-shadow effect to an SVG image using D3. Check out my code below and see the example block here: var imgurl = 'http://www.logo-designer.co/wp-content/uploads/2015/08/2015-Penn-State-University-logo-design-4.png'; var mar ...

javascriptcssd3.jssvg

Is the issue of Padding Overlap with Sidebar Item List getting in the way?

I am currently new to coding in HTML and CSS, so please bear with me if my code seems outdated or unconventional. I am working on creating a basic test website with a sidebar, but I'm encountering an issue where the items in my list are overlapping du ...

htmlcss

Can you explain the purpose of the role attribute in XHTML? How is it commonly utilized?

After reviewing W3C's information about the role attribute, I am still unclear about its purpose. Is the role attribute meant to simply clarify the code, or do some browsers or spiders interpret it in a specific way? Could the role attribute serve as ...

javascripthtmlattributesxhtml