How to align navbar items to the right in Bootstrap 4 ?

The .ml-auto class in Bootstrap can be used to align navbar items to the right. The .ml-auto class automatically aligns elements to the right. In this article, we will align the navbar to the right in two different ways, below both the approaches are discussed with proper example.

Example 1: In the first example, we use the .ml-auto class of Bootstrap 4 to align navbar items to the right. The .ml-auto class automatically gives a left margin and shifts navbar items to the right.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
      
        <!-- Including the bootstrap CDN -->
        <link rel="stylesheet" href=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
      
    <body>
      
        <!-- Creating a navigation bar using the
             .navbar class of bootstrap -->
        <nav class="navbar navbar-expand-sm bg-light">
      
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">
                      About
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                      Contacts
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                      Settings
                    </a>
                </li>
            </ul>
        </nav>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Example 2: In this example, we do not use any pre-defined Bootstrap 4 class to align the items. In this example, we create a navbar and then using CSS gives the left margin as an auto which shifts the navbar items to the right.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
      
        <!-- Including the bootstrap CDN -->
        <link rel="stylesheet" href=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
        <style>
            .navbar-nav {
                margin-left: auto;
            }
        </style>
    </head>
      
    <body>
      
        <!-- Creating a navigation bar using the
             .navbar class of bootstrap -->
        <nav class="navbar navbar-expand-sm bg-light">
      
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">
                      About
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                      Contacts
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                      Settings
                    </a>
                </li>
            </ul>
        </nav>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.