Bootstrap Navbar Frequently Asked Questions (FAQs)

<nav class="navbar" style="background-color: #e3f2fd;"> 
  <!-- Navbar content --> 


<nav class="navbar navbar-expand-lg">
  <!-- Navbar content --> 
  background-color: #e3f2fd;

Learn More

Add your logo image inside the navbar-brand anchor tag inside the Bootstrap Navbar.

<a class="navbar-brand" href="#">
    <img class="w-25" src="logo.png" alt="">
.navbar .navbar-nav .nav-link {
    color: #000000;

By default, the Bootstrap navbar uses the navbar-expand-lg class. You can change this to navbar-expand{-sm|-md|-lg|-xl|-xxl}.

To collapse the navbar at 768px use class navbar-expand-md.

<nav class="navbar navbar-expand-md bg-body-tertiary">
  <!-- Navbar content --> 

Bootstrap navbar uses an SVG as the background image for the toggler button.  Replace the stroke attribute value with the color you want.

I am using the color coral here.

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='' viewBox='0 0 30 30'%3e%3cpath stroke='coral' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
.navbar-toggler {
  border: 2px solid coral;

Learn More

Install Bootstrap icons. Replace the span element with your toggler icon of choice.

<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse"
    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
    aria-label="Toggle navigation">
    <i class="bi bi-three-dots-vertical"></i>

2 2 votes
Article Rating
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x