The Bootstrap navigation bar
The Bootstrap navigation bar is one of the components that is used on the majority of sites using the Bootstrap framework. The navbar functions as a navigation header in your sites and will collapse on smaller devices showing only an icon menu, using the Bootstrap Collapse plugin
. It is ideally suited to include site branding and navigation.
Basic navbar
A basic navigation bar consists of the website logo or brand name, navigation menu, and options for toggling behavior on smaller devices. A basic Bootstrap navigation bar might look similar to this:
The preceding navigation bar consists of an <a>
element containing the site logo, with a class name of .navbar-brand
. It also contains a <ul>
element, whose class name is set to .nav navbar-nav
. Each <li>
child element's class name is set to .nav-item
. The full HTML markup required to create the navigation bar is listed here:
<nav class="navbar navbar-full navbar-dark bg-primary"> <...