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.
<!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 >
<!-- Bootstrap 5 navbar text Class used -->
< nav class = "navbar" >
< div class = "m-3 container-fluid bg-success" >
< span class = "navbar-text" >
A Computer Science Portal for Geeks
</ span >
</ div >
</ nav >
<!-- Bootstrap 5 navbar text Class not used -->
< 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:
Example 2: In this example, we will use a navbar-light class with navbar text as it should in actual development.
<!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 >
<!-- Bootstrap 5 navbar text Class used -->
< 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