Bootstrap 5 Navbar Brand Image and Text

Bootstrap 5 Navbar Brand Image and text are used to create a navbar that holds the image and text within it. A navbar can have only text, only image or both a few times you can see buttons on navbar to navigate things.

Bootstrap 5 Navbar Brand Image and text used classes: There are no specific classes for Navbar brand image and text, We make a combination of navbar and navbar-brand classes with <img> tag and some text inserted in any element. The d-inline-block class with the align-text-top class is used to add an image and text at the same time in the <img> tag.

Syntax:

<nav class="navbar ...">
 <div class="container-fluid">
 <a class="navbar-brand" href="#">
 <img src="..." height="..." 
 class="d-inline-block align-text-top">
 </a>
 </div>
</nav>

Example 1: In this example, we set the image and button inside the navbar for styling using .btn class and .navbar classes.

Output:

👁 Bootstrap 5 Navbar Brand Image and text

Example 2: In this example, we set the image and text both in the navbar, with text set on the right side of the image.

Output:

👁 Bootstrap 5 Navbar Brand Image and text

Reference: https://getbootstrap.com/docs/5.0/components/navbar/#image-and-text