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

30 Nov, 2019
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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"                          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/
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to change the background color of the active nav-item?
How to Use Bootstrap with React?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills