{ WRAPKIT }
  1. Home
  2. Bootstrap
  3. Nav-navbar

Navs & Navbar The well navigation

Navbar

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.



Contextual

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


Navs

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.



Alternative style



Pills

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


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

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.

Safari and responsive justified navs

Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.




List Group

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

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.

14Cras justo odio 8Dapibus ac facilisis in 32Morbi leo risus 2Porta ac consectetur ac 9Vestibulum at eros 11Consectetur adipisicing

Simple custom content

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.