Bootstrap 3.3.7 Navigation and Components

Bootstrap includes many GUI components for navigation. This article explains their basic usage.
Tags:

List Groups

Bootstrap provides GUI components for navigation as well as buttons and toolbars. A list group is a grouped list of items, often used as an interface for moving to another page or selecting an item.

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

The outer element uses class="list-group" and each item uses class="list-group-item". The same classes can also be used with links.

<div class="list-group">
  <a href="#" class="list-group-item">Item</a>
</div>

Useful state classes include active and disabled. Contextual color classes include list-group-item-success, list-group-item-info, list-group-item-warning, and list-group-item-danger.

Breadcrumbs show the user’s position in a page hierarchy. In Bootstrap, they are created with a list and the breadcrumb class.

<ol class="breadcrumb">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li>Three</li>
</ol>

The separator is provided by Bootstrap’s default style. Breadcrumbs are one of the simplest navigation components.

Pagination

Pagination displays links for moving through multiple pages. Add the pagination class to a list.

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

Use active for the current page and disabled for links that cannot be used.

<li class="active"><a href="#">5</a></li>
<li class="disabled"><a href="#">Prev</a></li>

Pagination can be centered by wrapping it in an element with centered text. Size variants are available with pagination-sm and pagination-lg.

<ul class="pagination pagination-sm">
<ul class="pagination pagination-lg">

Tabs are created with a ul element using both nav and nav-tabs.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Page 1</a></li>
</ul>

The selected tab receives active. A pill-style navigation can be created by replacing nav-tabs with nav-pills.

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">A</a></li>
  <li role="presentation"><a href="#">B</a></li>
</ul>

Both components use the same basic markup. Only the visual presentation differs.

The navigation bar is a more complex navigation interface used in many applications and websites. It is usually built from a nav element, a container, and links.

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <a class="navbar-brand" href="#">Link</a>
  </div>
</nav>

Important navbar classes include navbar-fixed-top, navbar-fixed-bottom, and navbar-inverse. Fixed navbars remain attached to the top or bottom of the browser even when the page scrolls.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">One</a>
    <a class="navbar-brand" href="#">Two</a>
    <a class="navbar-brand" href="#">Three</a>
  </div>
</nav>

Using these classes, Bootstrap can provide list navigation, breadcrumbs, pagination, tabs, pills, and fixed navigation bars with only small changes to HTML markup.