Bootstrap 5 Navbar Brand Image and Text
Last Updated :
10 Jan, 2023
Bootstrap 5 Navbar Brand Image and text are used to create a navbar that holds the image and text within it. A navbar can have only text, only image or both a few times you can see buttons on navbar to navigate things.
Bootstrap 5 Navbar Brand Image and text used classes: There are no specific classes for Navbar brand image and text, We make a combination of navbar and navbar-brand classes with <img> tag and some text inserted in any element. The d-inline-block class with the align-text-top class is used to add an image and text at the same time in the <img> tag.
Syntax:
<nav class="navbar ...">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="..." height="..."
class="d-inline-block align-text-top">
</a>
</div>
</nav>
Example 1: In this example, we set the image and button inside the navbar for styling using .btn class and .navbar classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content=
"width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body class="m-3">
<div class="container text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h5>Bootstrap 5 Navbar Brand Image and text</h5>
</div>
<nav class="navbar navbar-expand-lg
navbar-dark bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src=
height="60">
</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarText">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active"
GeeksforGeeks
</a>
</li>
<li class="nav-item">
<a class="nav-link"
Practice
</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
|
Output:
Bootstrap 5 Navbar Brand Image and text
Example 2: In this example, we set the image and text both in the navbar, with text set on the right side of the image.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content=
"width=device-width, initial-scale=1.0">
<title>Bootstrap 5-GeeksforGeeks </title>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body class="m-3">
<div class="container text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h5>Bootstrap 5 Navbar Brand Image and text</h5>
</div>
<nav class="navbar navbar-expand-lg
navbar-dark bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src=
height="60"
class="d-inline-block align-text-top">
A Computer Science portal for geeks.
</a>
</div>
</nav>
</body>
</html>
|
Output:
.png)
Bootstrap 5 Navbar Brand Image and text
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#image-and-text
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...