Bootstrap 5 Navbar Text
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < title >Bootstrap 5 Navbar Text</ title > </ head > < body > < center > < h1 class = "text-success" > w3wiki</ 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 Beginner </ 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 Beginner </ 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.
HTML
<!DOCTYPE html> < html > < 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" > < title >Bootstrap 5 Navbar Text</ title > </ head > < body > < center > < h1 class = "text-success" > w3wiki</ 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 Beginner </ span > </ div > </ nav > </ center > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#text-1