Article Categories

Selected Reading

Wrap Strings of Text in Bootstrap Navbar

Bootstrap HTML jQuery Javascript

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.

Ankith Reddy

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

634 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next