Bootstrap 5 Navbar Brand

Bootstrap 5 Navbar brand is applied to the typical branding logo that sees in the top navigation bar. It may contain an image logo or text, etc. A Navbar helps readers in selecting topics, links, or sub-topics of their interest.

Bootstrap 5 Navbar Brand:

• Text: The text in the user interface is added using the navbar-brand class.
• Image: The texts created with the navbar-brand class can be placed inside an image element using the <img> tag.
• Image and Text: Both image and text can be put together at the same time by using the d-inline-block class and align-text-top on the <img> element in the UI.

Syntax:

<nav class="navbar ...">
 <div class="container-fluid">
 <span class="navbar-brand">
 ....
 </span>
 </div>
</nav>

Example 1: In this example, we illustrate the text inside the navbar using.navbar-brand class.

Output:

👁 Bootstrap 5 Navbar Brand

Example 2: In this example, we set an image inside the navbar by replacing the image using .navbar-brandclasses.

Output:

👁 Bootstrap 5 Navbar Brand

Example 3: In this example, we set the image and text inside the navbar, text is set on the right side of the image.

Output:

👁 Bootstrap 5 Navbar Brand

Reference: https://getbootstrap.com/docs/5.0/components/navbar/#brand