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
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

With bullets

To add bullets, you can use • or you can also use circle icon.

  • • Item 1
  • • Item 2
  • • Item 3
  • • Item 4
  • • Item 5
Edit in sandbox
  • • Item 1
  • • Item 2
  • • Item 3
  • • Item 4
  • • Item 5

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
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
 .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
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

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
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Menu

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

Edit in sandbox