Bootstrap 5 Navbar Brand Text
A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. Navbar Brand Text is used to add text in place of the brand logo. We can write text or links using the navbar-brand class.
Navbar Brand Text Class: There is no predefined class to put text in the navbar, we only need to put the text inside of the navbar-brand class used element.
Syntax:
<nav class="navbar navbar-*">
<div>
<a class="navbar-brand" href="#">
Your Navbar Brand Text
</a>
</div>
</nav>
Example 1: In this example, we will learn about using a navbar-brand class with links.
HTML
<!DOCTYPE html><html lang="en"><head> <title> Bootstrap 5 Navbar Brand Text </title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></head><body> <div class="container text-center"> <h1 class="text-success"> w3wiki </h1> <h2>Bootstrap 5 Navbar Brand Text</h2> <nav class="navbar navbar-light bg-success"> <a class="navbar-brand p-2" href="#"> w3wiki </a> </nav> </div></body></html> |
Output:
Bootstrap 5 Navbar Brand Text
Example 2: In this example, we will learn about using a navbar-brand class with headings.
HTML
<!DOCTYPE html><html lang="en"><head> <title> Bootstrap 5 Navbar Brand Text </title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></head><body> <div class="container text-center"> <h1 class="text-success"> w3wiki </h1> <h2>Bootstrap 5 Navbar Brand Text</h2> <nav class="navbar navbar-light bg-success"> <a class="navbar-brand p-2"> w3wiki </a> </nav> </div></body></html> |
Output:
Bootstrap 5 Navbar Brand Text
References: https://getbootstrap.com/docs/5.0/components/navbar/#text