Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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.


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    <script src=
    <script src=
    <div class="container">
            <h1 style="color:green;padding:13px;">
            <h3>Hamburger items on the right in bootstrap 4</h3>
            <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
                  <button class="navbar-toggler bg-light" 
                          aria-label="Toggle navigation"
                      <span class="navbar-toggler-icon"></span>
                  <div class="collapse navbar-collapse bg-info m-2 p-4" 
                    <!-- 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" 
                        <input class="form-control mr-sm-2"
                               type="search" placeholder="Search" 
                    <!-- 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>
                        <!-- inactive  link text item of menu -->
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        <!-- dropdown item of menu -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" 
                                href="#" id="navbarDropdown"
                                role="button" data-toggle="dropdown"
                            <!-- dropdown sub items of menu -->
                            <div class="dropdown-menu text-right" 
                                <a class="dropdown-item" href="#">
                                <a class="dropdown-item" href="#">
                                 Another action
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">
                                 Something else here
                        <!-- disable link text item of menu -->
                        <li class="nav-item ">
                            <a class="nav-link disabled" 
                               href="#" tabindex="-1" 



Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 30 Nov, 2019
Like Article
Save Article
Similar Reads
Related Tutorials