Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Display Unordered List in Two Columns?
In HTML, unordered lists are collections of items that do not have to be in any particular order. To list these items, we frequently use simple bullet points and that is why they are often known as bulleted lists. An unordered list begins with the <ul> tag and closes with a </ul> tag. The list items begin with the <li> tag and end with </li> tag.
The <ul> tag, which stands for unordered list, is the <li> tag's parent. This means that the <li> tag is the <ul> tag's child. By default, unordered lists display items in a single vertical column, but we can arrange them into multiple columns using CSS properties.
Basic Unordered List
Following is the basic syntax for creating an unordered list
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
There can be 4 types of bulleted lists: disc, circle, square and none. This can be specified by the type attribute inside the <ul> tag or the CSS list-style-type property. The default appearance of an unordered list is shown below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic Unordered List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Vegetables</h3>
<ul>
<li>Capsicum</li>
<li>Brinjal</li>
<li>Onion</li>
<li>Tomato</li>
<li>Carrot</li>
<li>Potato</li>
</ul>
</body>
</html>
The output shows the list items appearing in a single column by default
Vegetables ? Capsicum ? Brinjal ? Onion ? Tomato ? Carrot ? Potato
As we can see the list items appear in a single column by default. However, we can change this setting and display the list in two or more columns by using CSS column properties.
Using the CSS column-count Property
The CSS column-count property specifies the number of columns into which the element's content should be divided. This property accepts an integer value or the keyword auto. When set to a specific number, it maintains that column count regardless of browser width.
Following is the syntax
column-count: number|auto;
Example
In the example below, we will create an unordered list with two columns by specifying the number of columns using the column-count property
<!DOCTYPE html>
<html>
<head>
<title>Two Column List using column-count</title>
<style>
.two-columns {
column-count: 2;
column-gap: 20px;
background-color: #f9f9f9;
padding: 15px;
border-radius: 8px;
width: 500px;
}
li {
padding: 3px 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Top Engineering Colleges in Hyderabad</h3>
<ul class="two-columns" type="square">
<li>IIT Hyderabad</li>
<li>IIIT Hyderabad</li>
<li>Jawaharlal Nehru Institute of Technology</li>
<li>Osmania University</li>
<li>Chaitanya Bharati Institute of Technology</li>
<li>VNR VJIET Hyderabad</li>
<li>Vasavi College of Engineering</li>
<li>Sreenidhi Institute of Technology</li>
</ul>
</body>
</html>
The output displays the list items arranged in two equal columns
Top Engineering Colleges in Hyderabad ? IIT Hyderabad ? VNR VJIET Hyderabad ? IIIT Hyderabad ? Vasavi College of Engineering ? Jawaharlal Nehru Institute ? Sreenidhi Institute of Technology ? Osmania University ? Chaitanya Bharati Institute
Using the CSS column-width Property
The CSS column-width property defines the ideal width for each column. The browser automatically determines the number of columns based on the available space and specified width. This property is responsive and adapts to different screen sizes.
Following is the syntax
column-width: length|auto;
Example
Here we set a specific column width and let the browser determine the number of columns
<!DOCTYPE html>
<html>
<head>
<title>Two Column List using column-width</title>
<style>
.flexible-columns {
column-width: 200px;
column-gap: 25px;
background-color: #e8f4fd;
padding: 15px;
border-radius: 8px;
width: 500px;
}
li {
padding: 3px 0;
break-inside: avoid;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Popular Programming Languages</h3>
<ul class="flexible-columns" type="disc">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C++</li>
<li>TypeScript</li>
<li>C#</li>
<li>PHP</li>
<li>Go</li>
<li>Ruby</li>
<li>Swift</li>
</ul>
</body>
</html>
With a column width of 200px, the browser fits two columns in the 500px container
Popular Programming Languages ? JavaScript ? PHP ? Python ? Go ? Java ? Ruby ? C++ ? Swift ? TypeScript ? C#
Using the CSS columns Shorthand Property
The columns CSS shorthand property combines both column-width and column-count in a single declaration. This property accepts column-count, column-width, or both properties together.
Following is the syntax
columns: column-width column-count; /* OR */ columns: column-count; /* OR */ columns: column-width;
Example
In the example below, we use the columns shorthand property to create a two-column layout
<!DOCTYPE html>
<html>
<head>
<title>Two Column List using columns Property</title>
<style>
.shorthand-columns {
columns: 2;
column-gap: 20px;
background-color: #fff8e7;
padding: 15px;
border-radius: 8px;
width: 480px;
}
li {
padding: 3px 0;
break-inside: avoid;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Web Development Technologies</h3>
<ul class="shorthand-columns" type="circle">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>React</li>
<li>Vue.js</li>
<li>Angular</li>
<li>Node.js</li>
<li>Bootstrap</li>
<li>Sass</li>
<li>jQuery</li>
</ul>
</body>
</html>
The shorthand property creates a clean two-column layout
Web Development Technologies ? HTML5 ? Node.js ? CSS3 ? Bootstrap ? JavaScript ? Sass ? React ? jQuery ? Vue.js ? Angular
6K+ Views
