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.
<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:
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.