Wrap Strings of Text in Bootstrap Navbar

To wrap strings of text in a Bootstrap navbar, use the .navbar-text class. This class ensures proper vertical alignment and styling for non-link text content within navigation bars.

What is navbar-text?

The .navbar-text class is specifically designed for adding non-interactive text elements to Bootstrap navbars. It provides appropriate spacing, alignment, and color styling that matches the navbar's design.

Example

You can try to run the following code to set text in Bootstrap Navbar:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Navbar Text Example</title>
        <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script src="/scripts/jquery.min.js"></script>
        <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Demo</a>
            </div>
            <div>
                <p class="navbar-text">Copyright &copy; 2024 TutorialsPoint</p>
                <p class="navbar-text navbar-right">Welcome, User!</p>
            </div>
        </nav>
    </body>
</html>

Key Features

The .navbar-text class provides:

  • Proper vertical alignment - Text aligns with navbar links
  • Consistent spacing - Maintains navbar padding and margins
  • Color inheritance - Matches the navbar's text color scheme
  • Responsive behavior - Adapts to different screen sizes

Common Use Cases

  • Copyright notices
  • User greeting messages
  • Status indicators
  • Breadcrumb text
  • Search result counts

Positioning Options

You can combine .navbar-text with positioning classes:

  • .navbar-left - Aligns text to the left
  • .navbar-right - Aligns text to the right

Conclusion

The .navbar-text class is essential for adding non-interactive text to Bootstrap navbars. It ensures proper styling and alignment while maintaining the navbar's responsive design.

Updated on: 2026-03-15T23:18:59+05:30

634 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements