Also see the official documentation
Documentation and examples for how to use Bootstrap’s included navigation components.
Navigation available in Bootstrap share general markup and styles, from the base .nav
class to the active and disabled states. Swap modifier classes to switch between each style.
The base .nav
component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
Classes are used throughout, so your markup can be super flexible. Use <ul>
s like above, <ol>
if the order of your items is important, or roll your own with a <nav>
element. Because the .nav
uses display: flex
, the nav links behave the same as nav items would, but without the extra markup.
Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.
Centered with .justify-content-center
:
Right-aligned with .justify-content-end
: