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=
"https://cdn.jsdelivr.net/npm/[email protected]/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">
            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.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/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">
            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

Bootstrap 5 Offcanvas

cu17bcs1207

Improve

Article Tags :

Bootstrap 5 Navbar Text

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?