Bootstrap 5 navbar logo patterns for adding brand identity to your navbar. This page covers image logo, icon+text logo, dark navbar logo and centered logo.
Key Classes Reference
| Class | What It Does |
|---|---|
.navbar-brand | Logo/brand container with built-in spacing |
.d-flex.align-items-center | Aligns logo image and text |
.gap-2 | Space between logo icon and text |
height="28" | Recommended logo image height |
.mx-auto | Centers logo in navbar |
1. Bootstrap 5 Navbar with Image Logo
Navbar with an img logo using navbar-brand. Use height attribute to control logo size.
2. Bootstrap 5 Navbar with Icon + Text Logo
Brand logo built from an emoji/icon and bold text — no image file needed.
3. Bootstrap 5 Dark Navbar with Logo
Dark navbar with a light logo version using Bootstrap's dark color mode.
4. Bootstrap 5 Centered Logo Navbar
Logo centered in the navbar with links on each side — common on e-commerce and marketing sites.
Frequently Asked Questions
Add an img inside the navbar-brand anchor: <a class='navbar-brand' href='/'><img src='logo.png' alt='Brand' height='30'></a>. Use the height attribute to control size. Bootstrap automatically adds spacing via the navbar-brand styles.
Wrap both in the navbar-brand with d-flex align-items-center gap-2: <a class='navbar-brand d-flex align-items-center gap-2'><img src='logo.svg' height='28'><span>Brand Name</span></a>. The d-flex makes them inline and gap-2 adds space between them.
Use d-none d-md-block to hide text on mobile and show only the icon: <a class='navbar-brand'><img src='logo.svg'><span class='d-none d-md-inline'>Brand Name</span></a>. This saves space on small screens while keeping the icon visible.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.