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