Bootstrap 4 Lists and Navs


Bootstrap 4 includes a huge collection of classes to style list and navigation elements. Lets have a look at each of them.

List group

Add class list-group to the parent element of the lists and add class list-group-item to each of the child elements to get the basic list styiling.

<ul class="list-group">
  <li class="list-group-item">List Item</li>
  <li class="list-group-item">List Item</li>
  <li class="list-group-item">List Item</li>
</ul>

Result

  • List Item
  • List Item
  • List Item

Active and Disabled List Item

Add class active or disabled to add a separate style to a list item.

<ul class="list-group">
  <li class="list-group-item active">Active List Item</li>
  <li class="list-group-item">List Item</li>
  <li class="list-group-item disabled">Disabled List Item</li>
</ul>

Result

  • Active List Item
  • List Item
  • Disabled List Item

Links and Buttons in List

Add class list-group-item-action to the list item to add hover effects to the list items. With class list-group-item added to the child element, <li> tag is not compulsory.

<ul class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Active List Item</a>
  <a href="#" class="list-group-item list-group-item-action">List Item</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Disabled List Item</a>
</ul>

Result

List Group Flush

Add class list-group-flush to the parent element of lists to remove borders except from the bottom and border radius from the list items.

<ul class="list-group list-group-flush">
  <li class="list-group-item">List Item</li>
  <li class="list-group-item">List Item</li>
  <li class="list-group-item">List Item</li>
</ul>

Result

  • List Item
  • List Item
  • List Item

Horizontal List Group

Add class list-group-horizontal or one of its responsive variants like list-group-horizontal-md to make the list group display horizontally on all viewports or specific sized viewports.

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">List Item</li>
  <li class="list-group-item">List Item</li>
  <li class="list-group-item">List Item</li>
</ul>

Result

  • List Item
  • List Item
  • List Item

Contextual Classes

You can also add contextual background and colors to list groups using contextual classes like list-group-item-primary to the list group item. Add class list-group-item-action to add hover effects.

<ul class="list-group list-group-flush">
  <li class="list-group-item list-group-item-action list-group-item-primary">List Item</li>
  <li class="list-group-item list-group-item-action list-group-item-secondary">List Item</li>
  <li class="list-group-item list-group-item-action list-group-item-light">List Item</li>
  <li class="list-group-item list-group-item-action list-group-item-dark">List Item</li>
  <li class="list-group-item list-group-item-action list-group-item-success">List Item</li>
  <li class="list-group-item list-group-item-action list-group-item-info">List Item</li>
  <li class="list-group-item list-group-item-action list-group-item-warning">List Item</li>
  <li class="list-group-item list-group-item-action list-group-item-danger">List Item</li>
</ul>

Result

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Breadcrumb

Breadcrumbs are added to webpages in order to indicate the current page's location in the navigation heirarchy. Add class breadcrumb to the parent element with class breadcrumb-item on each of its child elements. Add class active to the current page item. You can wrap the breadcrumb with a <nav> element too.

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Bootstrap</a></li>
  <li class="breadcrumb-item"><a href="#">Bootstrap 4</a></li>
  <li class="breadcrumb-item active">List Groups & Navigations</li>
</ol>

Result

Pagination

Paginations are added a webpage to indicate a series of related contents exist across multiple pages. Add class pagination to the parent element and class page-item to the child elements with class active added to the current page or class disabled to the disabled ones. Add class page-link to the anchor elements. Add class pagination-sm or class pagination-lgfor sizing with flexbox utilities for alignment.

<ul class="pagination pagination-lg justify-content-end">
  <li class="page-item disabled"><a class="page-link" href="#">&laquo;</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>

Result

Navs

A collection of general and specific navigation styles are available in Bootstrap 4 for simple navigations and navigation bars.

Basic Navigation

Add class nav to the parent element along with class nav-item to the lists and class nav-link to the anchor elements to add basic styles to the navigation elements. Add class active or disabled to the nav-link to add specific styles to the active or disabled elements.

<ul class="nav">
  <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>  	
  <li class="nav-item"><a href="#" class="nav-link disabled">Disabled Nav Item</a></li>  	
</ul>

Result

You can also achieve the same styles without using the <li> element or class nav-item.

<ul class="nav">
  <a href="#" class="nav-link active">Active Nav Item</a>
  <a href="#" class="nav-link">Nav Item</a>
  <a href="#" class="nav-link">Nav Item</a>  	
  <a href="#" class="nav-link disabled">Disabled Nav Item</a> 	
</ul>

Alignment

Add utility classes like justify-content-* or flex-column with the parent element to align them horizontally or vertically.

Tabs

Add class nav-tabs to the parent element to create a tab interface.

<ul class="nav nav-tabs">
  <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>  	
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>  	
</ul>

Result

Pills

Add class nav-pills to style them as pills.

<ul class="nav nav-pills">
  <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>  	
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>  	
</ul>

Result

Fill

Add class nav-fill to make the navigation occupy the entire width of the parent container. The space will be divided with respect to the items length.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">A Nav Item With Longer Text</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>  	
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>  	
</ul>

Result

Justify

Add class nav-justify to force all the nav items take up equal width and the element occupy the entire width of its parent.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item With Longer Text</a></li>  
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>	
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>  	
</ul>

Result

Responsive Navs

Add class flex-column with responsive class like flex-row-sm to create a responsive nav.

<ul class="nav flex-column flex-row-sm">
  <li class="nav-item"><a href="#" class="nav-link active">Active Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>  	
  <li class="nav-item"><a href="#" class="nav-link">Nav Item</a></li>  	
</ul>

Result