Bootstrap 5 Navbar Brand Image
Last Updated :
30 Nov, 2022
Bootstrap 5 Navbar Brand Image is used to put the image inside of a navbar. a navbar can contain images and text. We just need to use the HTML img tag inside of navbar-brand defined element. If you want to put the logo on the nav bar then this will be the option.
Pre-requisite: To use image on the navbar you need to have the knowledge of Bootstrap 5 Navbar Brand.
Navbar Brand Image Class: There is no predefined class to put an image in the navbar, we only need to put the image inside of the navbar-brand class used element.
Syntax:
<nav class="navbar navbar-*">
<div>
<a class="navbar-brand" href="#">
<img src="" alt="" width="" height="" alt="">
</a>
</div>
</nav>
Example 1: The code example below demonstrates how we can use the Bootstrap 5 Navbar Brand Image.
HTML
<!doctype html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body class = "m-2" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h4 >Bootstrap 5 Navbar Brand Image</ h4 >
</ div >
< nav class="navbar
navbar-expand-lg
navbar-light
bg-light
mt-3">
< div class = "container" >
< a class = "navbar-brand" href = "#" >< img
src =
alt = "" width = "30"
height = "30" ></ a >
< div class = "collapse navbar-collapse"
id = "navbarSupportedContent" >
< ul class="navbar-nav
me-auto
mb-2
mb-lg-0">
< li class = "nav-item" >
< a class = "nav-link active"
aria-current = "page"
href = "#" >Home</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" >Link</ a >
</ li >
</ ul >
</ div >
</ div >
</ nav >
</ body >
</ html >
|
Output:
Example 2: The code example below demonstrates how we can use the Bootstrap 5 Navbar Brand Image and align it to the right of the navbar.
HTML
<!doctype html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body class = "m-2" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h4 >Bootstrap 5 Navbar Brand Image</ h4 >
</ div >
< nav class="navbar
navbar-expand-lg
navbar-light
bg-light
mt-3">
< div class = "collapse navbar-collapse justify-content-end"
id = "navbarSupportedContent" >
< ul class = "navbar-nav" >
< li class = "nav-item" >
< a class = "nav-link active"
aria-current = "page"
href = "#" >Home</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" >Link</ a >
</ li >
< li class = "nav-item" >
< a class = "navbar-brand" href = "#" >< img
src =
alt = "" width = "30"
height = "30" >
</ a >
</ li >
</ ul >
</ div >
</ nav >
</ body >
</ html >
|
Output:
Navbar Brand Image
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#image
Share your thoughts in the comments
Please Login to comment...