If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the `<ul>,` or wrap a `<nav>` element around the whole navigation.

#### Base nav

Roll your own navigation style by extending the base `.nav` component. All Bootstrap’s nav components are built on top of this by specifying additional styles.

#### Nav with Border

To wrap with border, use `.wrap-border` class.

#### Nav with Square Border

To wrap with square border, use `.square-border` class with `.wrap-border` class.

#### Nav with Divider

To add divider, use `.dropdown-divider` class to `<li>`

#### Navs with header Options

#### Nav with Header

To add header to nav, use `.nav-header` class.

#### Heading with Icon

You can also add icon to the text in header section.

#### Heading with Right Icon

You can add icon to right side of the text by using `.float-right` class.

#### Heading Icon both the side

You can also add icon to both sides of the text in header section.

#### Links with Icons

#### Icon on left

Use icon name class to set icons.

#### Icon on Right

To set icons to right use `.float-right` class.

#### Icon on both side of links

#### With Header and list Icons

#### Navs with Labels & Label pills

#### With Label

To add label to nav, use `.badge.badge-COLOR` classes.

#### With Label Pills

To add label pill to nav, use `.badge.badge-pill.badge-COLOR` classes.

#### With Label for links

#### With Label Pills for links