Navbar brand
Bootstrap 5 Navbar brand component
Responsive Navbar brand built with Bootstrap 5. Examples of responsive navbar brands include the image, the icon, in center or a background color.
Basic example
Use .navbar-brand to get a brand.
The .navbar-brand can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.
Image and text
Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size.
Icon and text
You can place icons in .navbar-brand using the CSS Prefix fa and the icon's name. Icons are designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).
In center
Add .d-flex, .justify-content-between and .flex-row next to the .container-fluid, create a 3 div, in the 2nd (middle) put .navbar-brand to center the brand.
Background color
Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from data-mdb-theme="light" for use with light background colors, or data-mdb-theme="dark" for dark background colors. Then, customize with .bg-* utilities.
See also our color docs to learn more about colors.