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?

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.


<nav class="navbar navbar-default navbar-expand-lg navbar-light bg-light">
 <a class="navbar-brand" href="#"> Linuxhint</a>
 <ul class=" navbar-nav ">
  <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
  <li class="nav-item"><a class="nav-link" href="#">About</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Contact</a></li><br>

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.


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:
The “width” and “height” determine the image’s breadth and height:
<a class="navbar-brand" href="#">
 <img src="/image/linux-logo.png" width="60" height="40">


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


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.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.