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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...