Article Categories

Selected Reading

Align the components with Bootstrap

jQuery Bootstrap HTML Javascript

Bootstrap provides utility classes to align navbar components horizontally. Use .navbar-left to float elements to the left and .navbar-right to float elements to the right within the navbar.

Alignment Classes

Bootstrap offers two primary classes for navbar alignment:

.navbar-left - Floats elements to the left side of the navbar
.navbar-right - Floats elements to the right side of the navbar

These classes can be applied to navigation lists, forms, buttons, and text elements within the navbar.

Example

Here's a complete example demonstrating left and right alignment of various navbar components:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Navbar Alignment</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" style="background: orange;">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">TutorialsPoint</a>
      </div>
      
      <div>
        <!-- Left Aligned Components -->
        <ul class="nav navbar-nav navbar-left">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Tutorials
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">JavaScript</a></li>
              <li><a href="#">Python</a></li>
              <li><a href="#">Java</a></li>
              <li class="divider"></li>
              <li><a href="#">More Tutorials</a></li>
            </ul>
          </li>
        </ul>
        
        <form class="navbar-form navbar-left" role="search">
          <button type="submit" class="btn btn-default">Search</button>
        </form>
        
        <p class="navbar-text navbar-left">Left Aligned Text</p>
        
        <!-- Right Aligned Components -->
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Profile</a></li>
              <li><a href="#">Settings</a></li>
              <li class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
        
        <form class="navbar-form navbar-right" role="search">
          <button type="submit" class="btn btn-primary">Login</button>
        </form>
        
        <p class="navbar-text navbar-right">Welcome User</p>
      </div>
    </nav>
  </body>
</html>

Key Components for Alignment

Component	Left Alignment Class	Right Alignment Class
Navigation Links	`.nav .navbar-nav .navbar-left`	`.nav .navbar-nav .navbar-right`
Forms	`.navbar-form .navbar-left`	`.navbar-form .navbar-right`
Text	`.navbar-text .navbar-left`	`.navbar-text .navbar-right`

Best Practices

Use .navbar-left for primary navigation and brand-related elements
Use .navbar-right for user actions like login, search, or account menus
Ensure proper spacing between left and right aligned elements
Test responsiveness on different screen sizes

Conclusion

Bootstrap's .navbar-left and .navbar-right classes provide simple yet effective ways to align navbar components. Use them to create well-organized navigation layouts with elements positioned exactly where needed.

Lakshmi Srinivas

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

401 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next