Bootstrap Lists - Complete Guide with Examples

1. Basic Bootstrap List (Default)

No special classes needed—just standard HTML lists with Bootstrap's base styling.

<ul class="list">
  <li>Default list item 1</li>
  <li>Default list item 2</li>
  <li>Default list item 3</li>
</ul>

2. Unstyled List (Removes bullets & left padding)

Use .list-unstyled to remove default list styling.

<ul class="list-unstyled">
  <li>No bullet point</li>
  <li>No left padding</li>
  <li>Clean for custom layouts</li>
</ul>

3. Inline List (Horizontal navigation)

Use .list-inline and .list-inline-item.

<ul class="list-inline">
  <li class="list-inline-item">Home</li>
  <li class="list-inline-item">Products</li>
  <li class="list-inline-item">Support</li>
  <li class="list-inline-item">Contact</li>
</ul>

4. Description Lists (Definition list)

Styled with Bootstrap's .dl approach.

<dl class="row">
  <dt class="col-sm-3">Term 1</dt>
  <dd class="col-sm-9">Description for term 1</dd>

  <dt class="col-sm-3">Term 2</dt>
  <dd class="col-sm-9">Description for term 2</dd>
</dl>

5. List Group (Rich, interactive lists)

The most powerful list component in Bootstrap.

Basic List Group

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Active & Disabled Items

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Active item</li>
  <li class="list-group-item">Regular item</li>
  <li class="list-group-item disabled" aria-disabled="true">Disabled item</li>
</ul>

List Group with Links/Buttons

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Link item 1</a>
  <a href="#" class="list-group-item list-group-item-action">Link item 2</a>
  <button type="button" class="list-group-item list-group-item-action">Button item</button>
</div>

List Group with Badges

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge bg-secondary rounded-pill">3</span>
  </li>
</ul>

Colored List Group Items (Contextual classes)

<ul class="list-group">
  <li class="list-group-item">Default</li>
  <li class="list-group-item list-group-item-primary">Primary</li>
  <li class="list-group-item list-group-item-secondary">Secondary</li>
  <li class="list-group-item list-group-item-success">Success</li>
  <li class="list-group-item list-group-item-danger">Danger</li>
  <li class="list-group-item list-group-item-warning">Warning</li>
  <li class="list-group-item list-group-item-info">Info</li>
  <li class="list-group-item list-group-item-light">Light</li>
  <li class="list-group-item list-group-item-dark">Dark</li>
</ul>

Custom Content in List Groups

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content here.</p>
    <small>Additional small text.</small>
  </a>
</div>

Flush List Group (Removes borders)

<ul class="list-group list-group-flush">
  <li class="list-group-item">No border on sides</li>
  <li class="list-group-item">Only top/bottom borders</li>
  <li class="list-group-item">Great for sidebars</li>
</ul>

Numbered List Group

<ol class="list-group list-group-numbered">
  <li class="list-group-item">First step</li>
  <li class="list-group-item">Second step</li>
  <li class="list-group-item">Third step</li>
</ol>

Horizontal List Group

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

Quick Reference Table

Class	Purpose
`.list-unstyled`	Remove bullets/padding
`.list-inline` + `.list-inline-item`	Horizontal list
`.list-group`	Container for list group
`.list-group-item`	Individual list item
`.list-group-item-action`	Hover/focus clickable item
`.list-group-flush`	Remove borders
`.list-group-horizontal`	Horizontal layout
`.list-group-numbered`	Numbered items