Inline list

Bootstrap 5 Inline list component

Responsive Inline list built with the latest Bootstrap 5. Inline lists are responsive components for displaying a series of content. Many examples and tutorials.

Basic example

Here's a basic example of inline list. Add .list-inline to change the layout of list to inline.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Edit in sandbox 
<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>
  <li class="list-inline-item">Item 4</li>
  <li class="list-inline-item">Item 5</li>
</ul>

With bullets

To add bullets, you can use &bull; or you can also use circle icon.

  • • Item 1
  • • Item 2
  • • Item 3
  • • Item 4
  • • Item 5
Edit in sandbox 
<ul class="list-inline">
  <li class="list-inline-item">&bull; Item 1</li>
  <li class="list-inline-item">&bull; Item 2</li>
  <li class="list-inline-item">&bull; Item 3</li>
  <li class="list-inline-item">&bull; Item 4</li>
  <li class="list-inline-item">&bull; Item 5</li>
</ul>

With separators

To add separators, you have to add some CSS styles.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Edit in sandbox 
<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>
  <li class="list-inline-item">Item 4</li>
  <li class="list-inline-item">Item 5</li>
</ul>
.list-inline {
  display:block;
}
.list-inline li {
  display:inline-block;
}
.list-inline li:after {
  content:'|';
  margin:0 10px;
}

Align right

To align items right, you have to add .text-end to the ul element. You'll find more information about text alignment here.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Edit in sandbox 
<ul class="list-inline text-end">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
  <li class="list-inline-item">Item 4</li>
  <li class="list-inline-item">Item 5</li>
</ul>

Spacing

To increase space between list item, you have to add margin values to elements.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Edit in sandbox 
<ul class="list-inline">
  <li class="list-inline-item me-4">Item 1</li>
  <li class="list-inline-item me-4">Item 2</li>
  <li class="list-inline-item me-4">Item 3</li>
  <li class="list-inline-item me-4">Item 4</li>
  <li class="list-inline-item me-4">Item 5</li>
</ul>

Menu

Here's example of menu with inline items. You'll find more examples here.

Edit in sandbox 
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <!-- Container wrapper -->
  <div class="container-fluid">
    <!-- Toggle button -->
    <button data-mdb-button-init
      class="navbar-toggler"
      type="button"
      data-mdb-collapse-init
      data-mdb-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <i class="fas fa-bars"></i>
    </button>

    <!-- Collapsible wrapper -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Navbar brand -->
      <a class="navbar-brand mt-2 mt-lg-0" href="#">
        <img
          src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp"
          height="15"
          alt="MDB Logo"
          loading="lazy"
        />
      </a>
      <!-- Left links -->
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Team</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Projects</a>
        </li>
      </ul>
      <!-- Left links -->
    </div>
    <!-- Collapsible wrapper -->

    <!-- Right elements -->
    <div class="d-flex align-items-center">
      <!-- Icon -->
      <a class="text-reset me-3" href="#">
        <i class="fas fa-shopping-cart"></i>
      </a>

      <!-- Notifications -->
      <div class="dropdown">
        <a
          data-mdb-dropdown-init class="text-reset me-3 dropdown-toggle hidden-arrow"
          href="#"
          id="navbarDropdownMenuLink"
          role="button"
          data-mdb-toggle="dropdown"
          aria-expanded="false"
        >
          <i class="fas fa-bell"></i>
          <span class="badge rounded-pill badge-notification bg-danger">1</span>
        </a>
        <ul
          class="dropdown-menu dropdown-menu-end"
          aria-labelledby="navbarDropdownMenuLink"
        >
          <li>
            <a class="dropdown-item" href="#">Some news</a>
          </li>
          <li>
            <a class="dropdown-item" href="#">Another news</a>
          </li>
          <li>
            <a class="dropdown-item" href="#">Something else here</a>
          </li>
        </ul>
      </div>
      <!-- Avatar -->
      <div class="dropdown">
        <a
          data-mdb-dropdown-init class="dropdown-toggle d-flex align-items-center hidden-arrow"
          href="#"
          id="navbarDropdownMenuAvatar"
          role="button"
          data-mdb-toggle="dropdown"
          aria-expanded="false"
        >
          <img
            src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
            class="rounded-circle"
            height="25"
            alt="Black and White Portrait of a Man"
            loading="lazy"
          />
        </a>
        <ul
          class="dropdown-menu dropdown-menu-end"
          aria-labelledby="navbarDropdownMenuAvatar"
        >
          <li>
            <a class="dropdown-item" href="#">My profile</a>
          </li>
          <li>
            <a class="dropdown-item" href="#">Settings</a>
          </li>
          <li>
            <a class="dropdown-item" href="#">Logout</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- Right elements -->
  </div>
  <!-- Container wrapper -->
</nav>
<!-- Navbar -->