Nav

There is a set of nav classes for building different types of navigation. It's meant for simpler navigation that's not navivation bar.

Basic

• Lists, no lists, or nav tag
• Special assistive tags
• Align with flexbox

The basic nav class doesn't have special styling for the active states like some of the classes we'll see later. You can use them with ordered or unordered lists or regular divs and anchors. My favorite way is to use the nav tag with the nav class.

You need to include assistive technology tags to convey their functionality.

These are aligned using flexbox classes

Nav

nav nav-item nav-link

Try it

nav - This is the main container for the nav items.

nav-item - Each item inside navigation should have a nav-item class. In the case of list based navs, this should be in the li tag. You can omit this class if you're using the nav tag.

nav-link - This should be attached to the anchor tag link.

Nav Styles

nav-tabs nav-pills

Try it

nav-tabs - styles the links to look like tabs with the active class having a different look.

nav-pills - makes the active items look more like a button

You can use background and color classes to change the colors

Nav Alignment

nav-fill nav-justified

• Or flexbox classes

Try it

nav-fill - Fills up the horizontal space of the container while giving the buttons the space they need to fit.
nav-justified - Similar to nav-fill, but makes each button take up the same amount of space.

You can also use flexbox classes to achieve any desired effects.