PUBLISHED ON: JUNE 9, 2021
How to add image and text within the navbar?
The Bootstrap Navbar is used to add stylish navigation to the webpage. It used especially used for headers. The navbar can also be used to add brand logos and website names within. In addition to that, navigation can also contain textual content. So let us see how we can add text and images to the navbar using Bootstrap 5.
Adding Text to Navbar
The text can be added to the .navbar-brand wrapped under container class within the .navbar class. The .navbar-brand class can be used as a link by adding it to <a> or used as a heading by adding it to <span> element.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light mt-3">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
</body>
</html>
Output:
Here is the output of the above program,
Adding Images
The text in the .navbar-brand can be combined with the images. To add the images and text on the same line use some additional utility.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="icon.png" alt="img" style="max-width: 20px; max-height: 24px"></img> Navbar</a>
</div>
</nav>
</body>
</html>
Output:
Here is the output of the above program
-
Adding text using .navbar-text
In the previous example, see, how we can do the branding of any website using text. There is another way to add text to the navbar. The purpose of adding the text here is different from the previous one. Add text within .navbar-text class.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Adding text to navbar
</span>
</div>
</nav>
</body>
</html>
Output:
Here is the output of the above program.
