How to Display Unordered List in Two Columns

In this tutorial, you can see how to display an unordered list in two columns with a little CSS. We’ll demonstrate examples with the CSS columns and column-count properties.

Create HTML

Use the <ul> element for an unordered list and add <li> elements.

How to Create an Unordered List

<ul>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

Add CSS

Use the columns property and specify “2” as a value. Also, add the -webkit- and -moz- prefixes.

CSS for an Unordered List

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

Example of displaying an unordered list in two columns with the columns property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
    </ul>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose">- Some text

Some text
Some text
Some text
Some text
Some text

</div>### Example of displaying an unordered list in two columns with the column-count property:

Example of displaying an unordered list in two columns with the column-count property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        column-count: 2;
        column-rule: dotted 1px #333;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
    </ul>
  </body>
</html>

Try it Yourself »