YouTip- ` element with the class `navbar-nav`. Then, add the `.nav-item` class to the `
- ` element and the `.nav-link` class to the `` element:
## Example
[Try it »](#)
* * *
## Vertical Navbar
Create a vertical navbar by removing the `.navbar-expand-xxl|xl|lg|md|sm` class:
## Example
[Try it »](#)
* * *
## Centered Navbar
Create a centered navbar by adding the `.justify-content-center` class:
## Example
[Try it »](#)
* * *
## Different Color Navbars
You can use the following classes to create different colored navbars: `.bg-primary`, `.bg-success`, `.bg-info`, `.bg-warning`, `.bg-danger`, `.bg-secondary`, `.bg-dark`, and `.bg-light`.
**Tip:** For dark backgrounds, use `.navbar-dark` to set light text color. For light backgrounds, use `.navbar-light` to set dark text color.
## Example
[Try it »](#)
**Active and Disabled States**: You can add the `.active` class to the `` element to highlight the selected option. The `.disabled` class is used to make the link unclickable.
* * *
## Brand/Logo
The `.navbar-brand` class is used to highlight the brand/logo:
## Example
[Try it »](#)
You can use the `.navbar-brand` class to make an image responsive to the navbar.
## Example
[Try it »](#)
* * *
## Collapsible Navbar
Usually, on small screens, we collapse the navbar and display navigation options by clicking.
To create a collapsible navbar, add the classes `class="navbar-toggler"`, `data-bs-toggle="collapse"`, and `data-bs-target="#_thetarget_"` to the button. Then, wrap the navigation content (links) in a `` with the classes `class="collapse navbar-collapse"`. The `id` of the `` should match the `data-bs-target` specified on the button: ## Example [Try it »](#) * * * ## Navbar with Dropdown Menu Dropdown menus can be set up on the navbar: ## Example [Try it »](#) * * * ## Navbar Forms and Buttons The navbar form `` element uses the `class="form-inline"` class to layout input fields and buttons: ## Example [Try it »](#) You can also use other input classes, such as the `.input-group-addon` class to add a small label before the input field. ## Example [Try it »](#) * * * ## Navbar Text Use the `.navbar-text` class to set non-link text on the navbar, ensuring horizontal alignment, color, and padding match. ## Example [Try it »](#) * * * ## Fixed Navbar The navbar can be fixed to the top or bottom. We use the `.fixed-top` class to fix the navbar to the top: ## Example [Try it »](#) The `.fixed-bottom` class is used to fix the navbar to the bottom: ## Example [Try it »](#) * * * ## Navbar Example
Bootstrap5 Navbar
Navigation bars are generally placed at the top of a page.
We can use the `.navbar` class to create a standard navbar, followed by the `.navbar-expand-xxl|xl|lg|md|sm` class to create a responsive navbar (spreads horizontally on large screens, stacks vertically on small screens).
Options on the navbar can use the `