Twitter Bootstrap: Text in navbar

html

responsive-design

navbar

bootstrap

byAnton Shumikhin·Mar 8, 2025

For adding non-hyperlinked text to your Bootstrap navbar, use the .navbar-text class. It appropriately styles your text, making it consistent with the navbar's look and feel:

<nav class="navbar navbar-default">
  <span class="navbar-text">Congratulations! You're learning Bootstrap</span>
</nav>

This text blends seamlessly with the navbar, eliminating the need for custom CSS.

Inline or block styling

Navbar text can be styled as either inline or block. For inline styling, use <span> while <p> provides the block styling you need. The choice impacts how your text wraps and influences the display of surrounding items:

<!-- For inline text -->
<span class="navbar-text">Hello, inline text here!</span>

<!-- For block text -->
<p class="navbar-text">// Block is to text what Kryptonite is to Superman</p>

Text emphasis sans linking

If you need to highlight the text without creating an active link, wrap a heading tag (like <h5>) inside the <span>:

<nav class="navbar navbar-default">
  <span class="navbar-text"><h5>Warning! We're entering cool Bootstrap territory</h5></span>
</nav>

This accomplishes emphasis while preventing accidental redirections (because who needs that?).

Are you looking to include unlinked text as a navigation item? Use the .nav-item class with the text, improving navbar logic and design harmony:

<ul class="navbar-nav">
  <li class="nav-item navbar-text">
    We are going on a Bootstrap adventure!
  </li>
</ul>

This trick provides visual consistency when combined with clickable nav-link elements.

Breaking down the styling puzzle

Responsiveness wins

Designing navbars to be responsive means your text should comfortably fit different screens. With Bootstrap, we get responsive navbar classes that help keep the look intact:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse">
 // Your burger menu - no ketchup included: 
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">
  // No chance of missing this text!
    <span class="navbar-text ml-auto">You're in for a ride</span>
  </div>
</nav>

The collapsible feature pairs with the text, served as a responsive navbar - larger screens to the right, smaller screens to the center.

Delve into GitHub

Ever felt stuck, like a cat in a dog show? Check out Github's Issue 2799 for more tooltips, tricks, and workarounds provided by the community on quirky Bootstrap navbar scenarios.