Logo
React Bootstrap 5 Logo
Responsive React Logo built with Bootstrap 5. Navbar with logo, logo centered in Navbar, logo above the navbar, logo carousel & more.
Navbar Logo
Basic examples of Navbar Logo with the use of <MDBNavbarBrand /> wrapper. Learn more about the supported
Navbar content in the
main documentation
import React from 'react';
import {
MDBContainer,
MDBNavbar,
MDBNavbarBrand
} from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBNavbar light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarBrand href='#'>Navbar</MDBNavbarBrand>
</MDBContainer>
</MDBNavbar>
<br />
<MDBNavbar light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarBrand tag="span" className='mb-0 h1'>Navbar</MDBNavbarBrand>
</MDBContainer>
</MDBNavbar>
</>
);
}
import React from 'react';
import {
MDBContainer,
MDBNavbar,
MDBNavbarBrand
} from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBNavbar light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarBrand href='#'>
<img
src='https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp'
height='30'
alt=''
loading='lazy'
/>
</MDBNavbarBrand>
</MDBContainer>
</MDBNavbar>
</>
);
}
import React from 'react';
import {
MDBContainer,
MDBNavbar,
MDBNavbarBrand
} from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBNavbar light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarBrand href='#'>
<img
src='https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp'
height='30'
alt=''
loading='lazy'
/>
MDBootstrap
</MDBNavbarBrand>
</MDBContainer>
</MDBNavbar>
</>
);
}
Centered Logo Example
Click on the image below to view an example of a centered logo in a navbar. In this case, this is a double navbar, but you can also use with a single navbar.
Logo Above Navbar
Sometimes it makes sense to put your logo above the navbar. Keep in mind that it makes the navigation bar take more vertical space.
