Navbar Default

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases. More detail about the Navbar.

Navbar inverse

Modify the look of the navbar by adding .navbar-inverse

Starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

Tabs

Note the .nav-tabs class requires the .nav base class.

• Home
• Profile
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            ...
        </ul>
    </li>
</ul>

Pills

Take that same HTML, but use .nav-pills instead:

• Home
• Profile
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            ...
        </ul>
    </li>
</ul>

Pills are also vertically stackable. Just add .nav-stacked.

• Home
• Profile
• Messages

<ul class="nav nav-pills nav-stacked">
    ...
</ul>

Justified

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

• Home
• Profile
• Messages

• Home
• Profile
• Messages

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS

Add the badges component to any list group item and it will automatically be positioned on the right.

• 14Hover on Badge and drag it
• 8Dapibus ac facilisis in
• 32Morbi leo risus
• 2Porta ac consectetur ac
• 9Vestibulum at eros
• 11Consectetur adipisicing

NOTE: Adding sortable support via attribute data-toggle="sortable-list". Refer to the demo to see this in action.

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        Cras justo odio
    </li>
    <li class="list-group-item">
        <span class="badge badge-primary">8</span>
        Dapibus ac facilisis in
    </li>
    <li class="list-group-item">
        <span class="badge badge-success">32</span>
        Morbi leo risus
    </li>
    <li class="list-group-item">
        <span class="badge badge-info">2</span>
        Porta ac consectetur ac
    </li>
    <li class="list-group-item">
        <span class="badge badge-warning">9</span>
        Vestibulum at eros
    </li>
    <li class="list-group-item">
        <span class="badge badge-danger">11</span>
        Consectetur adipisicing
    </li>
</ul>

Linked items

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

<div class="list-group">
    <a href="#" class="list-group-item">
        <span class="badge">14</span>
        Cras justo odio
    </a>
    <a href="#" class="list-group-item">
        <span class="badge badge-primary">8</span>
        Dapibus ac facilisis in
    </a>
    <a href="#" class="list-group-item active">
        <span class="badge badge-success">32</span>
        Morbi leo risus
    </a>
    <a href="#" class="list-group-item">
        <span class="badge badge-info">2</span>
        Porta ac consectetur ac
    </a>
    <a href="#" class="list-group-item">
        <span class="badge badge-warning">9</span>
        Vestibulum at eros
    </a>
    <a href="#" class="list-group-item">
        <span class="badge badge-danger">11</span>
        Consectetur adipisicing
    </a>
</div>

Simple custom content

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>