Bootstrap Navbar Brand Image
Bootstrap Navbar Brand Image is used to put the image inside of a navbar, a navigation bar component in the Bootstrap framework. It typically appears at the top of a webpage, serving as a visual identifier for the website or application and linking back to the homepage.
Pre-requisite:
To use images 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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Navbar Brand Image</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-2">
<div>
<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=
"https://media.w3wiki.net/auth/profile/8ceu3jpotjla4m5wpbm7"
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" a
ria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<!-- New tabs -->
<li class="nav-item">
<a class="nav-link" href="#">DSA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Web tech</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Python</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Bootstrap Bundle with Popper -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"
integrity=
"sha384-52z9Z1PIpSVl7YsPEJc3cMWCiVX9pMPdR5+YYg8vTl3YYqvo9sOGcDhViWyDyGVg"
crossorigin="anonymous"></script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity=
"sha384-hhqIQv5GE0w4aQJJcP+J8yUkE5T4+JpK5YVxFkALBzhUTH5+VrA7f+rC2J84lC6H"
crossorigin="anonymous"></script>
</body>
</html>
Output:
Bootstrap 5 Navbar Brand Image Example 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.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-2">
<div>
<h1 class="text-success">
w3wiki
</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=
"https://media.w3wiki.net/auth/profile/8ceu3jpotjla4m5wpbm7"
alt=""
width="30"
height="30">
</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Output:
Bootstrap Navbar Brand Image Example Output