YouTip- ` element with the class `class="navbar-nav"`. Then, add the `.nav-item` class to the `
- ` elements and the `.nav-link` class to the `` elements:
## Example
[Try it »](#)
* * *
## Vertical Navbar
Create a vertical navbar by removing the `.navbar-expand-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 color navbars: `.bg-primary`, `.bg-success`, `.bg-info`, `.bg-warning`, `.bg-danger`, `.bg-secondary`, `.bg-dark`, and `.bg-light`.
**Tip:** For dark backgrounds, set the text color to light. For light backgrounds, set the text color to dark.
## 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 set an image to fit the navbar.
## Example
[Try it »](#)
* * *
## Collapsible Navbar
Typically, on small screens, we collapse the navbar and show the navigation options by clicking.
To create a collapsible navbar, add the `class="navbar-toggler"`, `data-toggle="collapse"`, and `data-target="#_thetarget_"` classes to the button. Then, wrap the navigation content (links) in a `` with the `class="collapse navbar-collapse"` class. The `id` on the `` element must match the `id` specified in the button's `data-target` attribute: ## Example [Try it »](#) * * * ## Navbar with Dropdown Menu You can set up a dropdown menu 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 of the page. 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 »](#)
Bootstrap4 Navbar
A navbar is typically placed at the top of a page.
We can use the `.navbar` class to create a standard navbar, followed by the `.navbar-expand-xl|lg|md|sm` class to create a responsive navbar (horizontal on large screens, vertical stacking on small screens).
The options on the navbar can be created using a `