BootstrapHow-ToBeginner · 3 min read

How to Use List Inline in Bootstrap: Simple Guide

To display list items inline in Bootstrap, add the list-inline class to the <ul> element and list-inline-item class to each <li>. This makes the list items appear side by side horizontally.

📐

Syntax

Use a <ul> element with the class list-inline. Each <li> inside it should have the class list-inline-item. This tells Bootstrap to display the list items in a row instead of stacked vertically.

html

<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>

Output

Item 1 Item 2 Item 3

💻

Example

This example shows a simple inline list with three items. The items appear side by side with some spacing between them.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Inline List Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <ul class="list-inline">
    <li class="list-inline-item">Home</li>
    <li class="list-inline-item">About</li>
    <li class="list-inline-item">Contact</li>
  </ul>
</body>
</html>

Output

Home About Contact

⚠️

Common Pitfalls

One common mistake is forgetting to add list-inline-item to each <li>. Without it, the list items will stack vertically even if the list-inline class is on the <ul>.

Another issue is using list-inline-item on elements other than <li>, which won't work as expected.

html

<!-- Wrong way: missing list-inline-item on li -->
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Right way: add list-inline-item to each li -->
<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
</ul>

Output

Item 1 Item 2 Item 1 Item 2

📊

Quick Reference

list-inline: Add to <ul> to make list horizontal.
list-inline-item: Add to each <li> for inline display.
Use with <ul> or <ol> elements.
Works well for navigation menus or simple horizontal lists.

✅

Key Takeaways

Add list-inline to the <ul> to start an inline list.

Add list-inline-item to each <li> to display items side by side.

Without list-inline-item, list items remain vertical even with list-inline.

Use inline lists for horizontal menus or simple item groups.

Bootstrap handles spacing and alignment automatically with these classes.