Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:




<!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>


Output:

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



Last Updated : 30 Nov, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads