The navigation bar is usually placed at the top of the page.
We can use it. .navbar class to create a standard navigation bar, followed by: .navbar-expand-xxl|xl|lg|md|sm class to create a responsive navigation bar (large screens spread horizontally and small screens stack vertically).
The options on the navigation bar can be used By deleting By adding You can use the following classes to create different colored navigation bars: Tip: for dark background Activate and disable states: can be found in the Can be used Usually, we collapse the navigation bar on the small screen and click to display the navigation options. To create a collapsible navigation bar, you can add Drop-down menus can be set on the navigation bar: The form of the navigation bar element and add
class="navbar-nav" class. And then in add on the element .nav-item class element using the .nav-link class: 7.22.1. Example ¶
Vertical navigation bar ¶
.navbar-expand-xxl|xl|lg|md|sm class to create a vertical navigation bar: 7.22.2. Example ¶
Center-aligned navigation bar ¶
.justify-content-center class to create a center-aligned navigation bar 7.22.3. Example ¶
<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... nav>
Different color navigation bar ¶
.bg-primary , .bg-success , .bg-info , .bg- warning , .bg-danger , .bg-secondary , .bg-dark and .bg- light ). .navbar-dark need to set the text color to light, for light background .navbar-light you need to set the text color to dark. 7.22.4. Example ¶
add on the element``.active`` Cclass to highlight the selected options. .disabled class to set that the link is unclickable. Brand / Logo ¶
.navbar-brand class is used to highlight brand / Logo: 7.22.5. Example ¶
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logoa> ... nav>
.navbar-brand class to set the picture adaptive navigation bar. 7.22.6. Example ¶
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> a> ... nav>
Collapse the navigation bar ¶
class="navbar-toggler" , data-bs- toggle="collapse" and data-target="# thetarget" class. Then, after setting up the class="collapse navbar-collapse" class div the navigation content (link) on the package, the``div`` element,the id specified on the data-target button for ID: matching: 7.22.7. Example ¶
The navigation bar uses the drop-down menu ¶
7.22.8. Example ¶
Forms and buttons of the navigation bar ¶