How to set hamburger items on the right in bootstrap 4 ?

In Bootstrap 4, NavBar is an essential component for menu purposes. To align menu items to right by using float-right class is works well in Bootstrap 3, but it doesn’t work in Bootstrap 4 because the navbar is now flexbox. The following approach will explain clearly.

In Bootstrap 4, NavBar contains so many items like text, link text, disable the link, dropdown buttons, forms, etc. To align text, link text, disable link and dropdown buttons to the right use class=”text-right”. But for forms use form class=”flex-row-reverse” to align right within NavBar. Using CSS properties might also help to align right within NavBar if the default class not needed.

Below example illustrates how to set hamburger items on the right in bootstrap 4.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
    <div class="container">
            <h1 style="color:green;padding:13px;">
             GeeksforGeeeks
            </h1>
            <h3>Hamburger items on the right in bootstrap 4</h3>
            <br>
  
            <nav class="navbar navbar-expand-lg
                 navbar-dark justify-content-between text-white"
                 style="background-color: #0074D9;">
                  <a class="navbar-brand" href="#">
                    <img src=
                         width="30" height="30"
                         class="d-inline-block align-top" alt=""
                     GeeksforGeeeks BS4 Navbar
                  </a>
                  <button class="navbar-toggler bg-light" 
                          type="button" 
                          data-toggle="collapse" 
                          data-target="#navbarNavDropdown01"
                          aria-controls="navbarNavDropdown01"
                          aria-expanded="false" 
                          aria-label="Toggle navigation"
                          style="outline-color:white">
                      <span class="navbar-toggler-icon"></span>
                  </button>
  
                  <div class="collapse navbar-collapse bg-info m-2 p-4" 
                        id="navbarNavDropdown01">
                        
                    <!-- form item of menu for search purpose -->  
                    <form class="form-inline flex-row-reverse ">
                        <button class="btn btn-success my-2 my-sm-0 bg-primary" 
                                type="submit">
                          Search
                        </button>
                        <input class="form-control mr-sm-2"
                               type="search" placeholder="Search" 
                               aria-label="Search">
  
                    </form>           
                      
                    <!-- Active item text of menu -->
                    <ul class="navbar-nav text-right mr-4">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">
                              Home<span class="sr-only">(current)</span>
                            </a>
                        </li>
                          
                        <!-- inactive  link text item of menu -->
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                          
                        <!-- dropdown item of menu -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" 
                                href="#" id="navbarDropdown"
                                role="button" data-toggle="dropdown"
                                aria-haspopup="true" 
                                aria-expanded="false">
                               Dropdown
                            </a>
                              
                            <!-- dropdown sub items of menu -->
                            <div class="dropdown-menu text-right" 
                                 aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">
                                 Action
                                </a>
                                <a class="dropdown-item" href="#">
                                 Another action
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">
                                 Something else here
                                </a>
                            </div>
                        </li>
                          
                        <!-- disable link text item of menu -->
                        <li class="nav-item ">
                            <a class="nav-link disabled" 
                               href="#" tabindex="-1" 
                               aria-disabled="true">
                              Disabled
                             </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:

Reference: https://getbootstrap.com/docs/4.0/components/navbar/



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.