How to Add a Logo to the Bootstrap Navigation bar

The Majority of professional websites display a small icon next to their name on the home page called “Logo”. This address bar icon is also known as a favicon. It provides the website with brand recognition and authority. More specifically, Bootstrap offers a class “navbar-brand” to add a logo to the website. This class can be applied to most of the elements. However, the “<a>” tag is best for placing a logo.

This post will cover:

• How to Add a Logo text to the Bootstrap Navigation bar?
• How to Add a Logo image to the Bootstrap Navigation bar?

How to Add a Logo Text to the Bootstrap Navigation bar?

To create a navigation bar, follow the steps mentioned below:

• Add a “<nav>” tag to make a navigation bar.
• Then, utilize the “<a>” element with the class “navbar-brand” to include a logo text.
• After adding the logo, implement the “<ul>” and “<li>” elements to add the navigation menu items.

HTML

The classes specified in the above code block are explained below:

• “navbar” and “navbar-default” are used to create a standard navigation bar.
• “navbar-expand-lg” class makes a navigation bar responsive.
• “navbar-light” sets the text color of the navigation bar to dark. It is used when the element has a light background.
• “bg-light” adjusts the navigation bar’s background color to a light gray.
• “nav-item” class is utilized to add the navigation items.
• “active” class makes the element highlight or stand out to show that it is currently active.
• “nav-link” provides styles for the navigation links.

Output

How to Add a Logo Image to the Bootstrap Navigation bar?

To place an image as a logo, use the “<img>” tag instead of text by following the steps:

• Firstly, the “<a>” tag is placed with the class “navbar-brand”. The “href” attribute of the “<a>” tag contains the reference of the linked page.
• The logo image is placed inside the “<img>” element. The “src”, “width”, and “height” attributes are utilized to adjust the image.
• The “src” attribute sets the image URL.
• The “width” and “height” determine the image’s breadth and height:

Output

It can be observed that we have successfully added the logo for the created web page.

Conclusion

To add a logo, first, create a navigation bar using the “<nav>” tag. Then, specify the Bootstrap “navbar-brand” class to the “<a>” tag for adding a logo. The logo is of two types: text and image. To place a text logo, include the text within the “<a>” tag. On the other hand, to place an image logo, use the “<img>” tag within the “<a>” tag. This post has explained the procedure for adding a logo to the bootstrap navigation bar.