0
0
Bootsrapmarkup~5 mins

List styles (unstyled, inline) in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Lists help organize information clearly. Using styles like unstyled or inline changes how lists look to fit your page design.

When you want a clean list without bullet points or numbers.
When you want list items to appear side by side instead of stacked.
When creating navigation menus that look like buttons or links in a row.
When you want to simplify the look of a list for a footer or header.
When you want to control spacing and alignment of list items easily.
Syntax
Bootsrap
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<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>

list-unstyled removes default bullets and left padding from the list.

list-inline makes list items display side by side horizontally. Each item needs list-inline-item class.

Examples
This list has no bullets or indentation. Items appear stacked vertically but clean.
Bootsrap
<ul class="list-unstyled">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>
This list shows items side by side, like a menu bar.
Bootsrap
<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>
Even with one item, inline style keeps it horizontal (though it looks like normal).
Bootsrap
<ul class="list-inline">
  <li class="list-inline-item">One</li>
</ul>
An empty unstyled list shows nothing but is valid HTML.
Bootsrap
<ul class="list-unstyled">
</ul>
Sample Program

This page shows two lists: one without bullets and one with items side by side. It uses Bootstrap classes to style them.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap List Styles Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <section>
      <h2>Unstyled List</h2>
      <ul class="list-unstyled">
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
      </ul>
    </section>
    <section class="mt-4">
      <h2>Inline List</h2>
      <ul class="list-inline">
        <li class="list-inline-item">Home</li>
        <li class="list-inline-item">Services</li>
        <li class="list-inline-item">Contact</li>
      </ul>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

The list-unstyled class removes bullets and left padding but keeps vertical stacking.

The list-inline class requires each <li> to have list-inline-item to display horizontally.

Use unstyled lists when you want a simple vertical list without decoration.

Use inline lists for horizontal menus or when space is limited horizontally.

Summary

Use list-unstyled to remove bullets and indentation from vertical lists.

Use list-inline with list-inline-item on each item to display list items horizontally.

These styles help make lists fit better in different parts of your webpage like menus or clean content sections.