Bootstrap 5 Navbar Supported Content

Bootstrap 5 Navbar Supported content contains Navbar which supports various sub-components like .navbar-brand, .navbar-nav, .navbar-text, .navbar-toggler, and .navbar-scroll.

• Brand: It is a company, project, or product name. We add .navbar-brand to various components like a heading or a link. We can add an image, text, or both image and text as our brand name.
• Nav: Navigation links of our navbar are built on .nav options. They occupy as much horizontal space as possible and keep all navbar contents securely aligned. We use  .nav-item and .nav-link elements along with .nav. We can also completely avoid list based approach as we use nav classes.
• Forms: We can place form controls within a navbar. We can use the <form> element if our navbar is an entire form.
• Text: Use .navbar-text for inserting bits of text in the navbar. .navbar-text also adjusts vertical alignment and horizontal spacing for text.

Syntax :

<nav class="navbar">
 <a class="navbar-brand" href="#">Navbar</a>
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link active">...</a>
 </li>
 ...
 </ul>
 <span class="navbar-text">...</span>
 <form>
 ...
 </form>
</nav>

Example 1: The .navbar-brand and <form> are used in this example(brand and form).

Output :

👁 Bootstrap 5 Navbar Supported Content

Example 2: The bootstrap 5 .navbar-text and .navbar-nav are used (text and nav).

Output :

👁 Bootstrap 5 Navbar Supported Content

Reference: https://getbootstrap.com/docs/5.0/components/navbar/#supported-content