Bootstrap 5 Navbar Text
Last Updated :
15 Nov, 2022
Navbar Text is used to put some text on the navbar. To do so Bootstrap 5 brings the Bootstrap 5 Navbar Text features. Creating a navbar is obvious when we are creating a website, and putting text on the navbar is required to guide the visitors to the right destination.
Navbar Text Class:
- navbar-text: This class is used to put some text content on the navbar.
Syntax:
<nav class="navbar....">
<div class="...">
<span class="navbar-text">
....
</span>
</div>
</nav>
Note: Using the navbar class is a must to create a navbar.
Below example illustrate the Bootstrap 5 Navbar Text:
Example 1: In this example, we will put text on the navbar, and we will use a background color for the navbar so we can distinguish the background of the page and the background of the navbar.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>Bootstrap 5 Navbar Text</title>
</head>
<body>
<center>
<h1 class="text-success">
GeeksforGeeks</h1>
<strong>
Bootstrap 5 Navbar Text
</strong>
<br><br>
<nav class="navbar">
<div class="m-3 container-fluid bg-success">
<span class="navbar-text">
A Computer Science Portal for Geeks
</span>
</div>
</nav>
<nav class="navbar">
<div class="m-3 container-fluid bg-success">
<span>
A Computer Science Portal for Geeks
</span>
</div>
</nav>
</center>
</body>
</html>
|
Output:
Bootstrap 5 Navbar Text
Example 2: In this example, we will use a navbar-light class with navbar text as it should in actual development.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>Bootstrap 5 Navbar Text</title>
</head>
<body>
<center>
<h1 class="text-success">
GeeksforGeeks</h1>
<strong>
Bootstrap 5 Navbar Text
</strong>
<br><br>
<nav class="navbar">
<div class="m-3 container-fluid navbar-light bg-primary">
<span class="navbar-text ">
A Computer Science Portal for Geeks
</span>
</div>
</nav>
</center>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#text-1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...