A collection of items displayed in an unordered format across two columns

I need help creating a list that displays in two columns.

One column for odd numbers, the other for even numbers.

Here's an example of what I'm trying to achieve:

+----------------------------------------------------+
|                    col-md-9                        |
+------------------------+---------------------------+
|     1.                 |        2                  |
|     3.                 |        4.                 |
|     5.                 |        6.                 |
|     7.                 |        8.                 |
|     9.                 |       10.                 |
|                        |                           |
|                        |                           |
|                        |                           |
|                        |                           |
+------------------------+---------------------------+

Here is my current code:

<div class="col-md-9">
   <ul>
      <li>1.</li>
      <li>2.</li>
      <li>3.</li>
      <li>4.</li>
      <li>5.</li>
      <li>6.</li>
      <li>7.</li>
      <li>8.</li>
      <li>9.</li>
      <li>10.</li>
   </ul>
</div>

Any tips on how I can accomplish this? PS: I am using a while() loop to expand the list.

Answer №1

To view the content in full screen, please make sure to check it as I have used markdown format which currently displays one list item in each row.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-9">
  <ul class="row">
    <li class="col-md-6">1.</li>
    <li class="col-md-6">2.</li>
    <li class="col-md-6">3.</li>
    <li class="col-md-6">4.</li>
    <li class="col-md-6">5.</li>
    <li class="col-md-6">6.</li>
    <li class="col-md-6">7.</li>
    <li class="col-md-6">8.</li>
    <li class="col-md-6">9.</li>
    <li class="col-md-6">10.</li>
  </ul>
</div>

Answer №2

For those who are not fans of bootstrap:

<style>
    .ul-two-cols {
        display: block;
        width: 100%;
        listItemStyle: none;
        position: relative;
    }
    .ul-two-cols > li {
        display: inline-block;
        width: 49%;
    }
</style>
<div style="width: 300px;">
  <ul class="ul-two-cols">
    <li>1.</li>
    <li>2.</li>
    <li>3.</li>
    <li>4.</li>
    <li>5.</li>
    <li>6.</li>
    <li>7.</li>
    <li>8.</li>
    <li>9.</li>
    <li>10.</li>
  </ul>
</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

Update the database with the new values and display them in an HTML table

I am working with a table that looks like the one below: <script> $("#edit").hide(); // Initially hide the edit table $("#update").click(function() { $("#edit").toggle(); $("#shown").toggle(); ...

Styling Challenges with CSS/AngularJS Accordion in Footer

I want to create a page layout as shown below: +---------------------------+ | Auto-fill / v scrollable ^| | || | || | v| +---------------------------+ | Fixed [][][] ...

Three.js is not displayed by the browser

I've recently delved into the world of webGL and three.js and decided to try out an example from JSFiddle, http://jsfiddle.net/BlackSRC/XWCRM/1/ However, upon testing it, I'm facing an issue where nothing is showing up on the screen. Here is th ...

Blending a background image with CSS

I've set a background image for the div, which is also used for responsive design. Check out the demo My goal is to ensure that the image doesn't appear cut off in the responsive view. I'm looking for a CSS solution to blend the image wit ...

section featuring a striking visual, user input form, and descriptive content

I want to create a layout with a background image in a div, a signup form on the right side, and a div containing h1 tags on the left side. Here is the HTML code: <html> <title> GoToMy PC </title> <head> <link rel="stylesheet" ...

I am looking to create a layout with two images placed next to each other using bootstrap, regardless of their dimensions. However, the images do not automatically adjust themselves within

<div class="container" style="background-color: aqua;"> <div class="row"> <div class="col-md-6"> <img src="nature.jpeg" class="img-responsive"> </div> <div class="col-md-6"> ...

The inability to display a Stylesheet is due to the unsupported MIME type, even though the MIME type seems to be missing when checking for errors

Every time I try to apply a specific style to a particular page on a website (even though the same style functions properly on other parts of the web server), an error message pops up. The error notification states Refused to apply style from 'styl ...

Switching my Bootstrap navbar to a Right-to-Left layout

Currently working on creating a navbar that needs to go from Right to Left for Hebrew language compatibility. Experimenting with a responsive navbar layout where the linked buttons align on the Left and move towards the Right. Want to have the brand logo ...

Alter the URL path with the help of jQuery

I developed a website with content in two different languages, each stored in separate folders named en and bn. My goal is to toggle between these folders when clicking on an href element using jQuery. <a class="eng_link " style="" href="#"> English ...

What is the best way to ensure an image is responsive in CSS and aligns perfectly in height with its neighboring text?

There is an image within the <img> tag and some text inside the <p> tag, both enclosed in a <div>. Although the image is responsive and resizes proportionally when the browser window changes size, there is an issue where as the text wrap ...

Why isn't my HTML list showing up on Firefox mobile browsers?

I am using jQuery mobile version 1.4.2. Here is the code snippet from my page. HTML <ul data-role="listview" class="ui-nodisc-icon ui-alt-icon"> <li><a href="#" >Real Estate in San Jose</a></li> </ul> CSS .ui-list ...

Setting a menu item as active in a SvelteKit app: A step-by-step guide

I encountered an issue with the main navigation menu in my sveltekit application. The problem is that when the app is loaded or refreshed, the active menu item corresponding to the current URL is not set. After struggling to find a solution online, I manag ...

The jQuery toggle functionality seems to be malfunctioning

I have created a form that should toggle (hide and show) with the click of a button, but for some reason it's not working. Can someone please take a look at my code below and let me know what I'm doing wrong? $(document).ready(function () { ...

Utilizing CSS to position an image at both the top and bottom of a webpage

I have been struggling to find a solution to this particular issue. My goal is to position an image at both the top and bottom of the page using a background property. I understand that by making the positioning relative, the image will be placed at the bo ...

Container Slides Along Despite Accurate Measurements

In a recent project of mine, I utilized two containers positioned side by side. Upon clicking a button, my goal was to have the content container (essentially a false body) decrease its width while the menu container would slide in. Despite my best effort ...

The input field does not adhere to the maximum length property

I am working on a React method that is supposed to create an input field with a set maximum length: displayInputField: function(name, placeholder, updateMethod, maxLength) { return ( <div className="form-group form-inline"> ...

Center-align the text in mui's textfield

What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...

Colorful radial spinner bar

I am interested in replicating the effect seen in this video: My goal is to create a spinner with text in the center that changes color, and when the color bar reaches 100%, trigger a specific event. I believe using a plugin would make this task simpler, ...

How can you assign a div ID to an image with a backlink included?

I need assistance in centering an image with a back link inside a div id, positioned 850px to the left. Additionally, I require another Div Id containing text centered on the same line within that same 850px space. Below is my CSS: #container3 > div { ...

Preventing the use of double-click on Grooveshark

I am currently in the process of creating a webpage to serve as a jukebox for parties. My goal is to have the page load Grooveshark with a transparent overlay (or any other necessary method) that can prevent users from forcefully adding their song to the f ...