How to design full width dropdown Navbar using Bootstrap ?

In Bootstrap 4, NavBar is an essential component for menu purposes. NavBar contains so many items like text, link text, disable the link, dropdown buttons, forms, etc. To make dropdown sub-items to full-width can be carried by using either CSS properties or by using default utilities of Bootstrap 4. The following approaches will explain clearly:

Approach 1:

  1. In Bootstrap 4, full width dropdown in Navbar might be possible by adding CSS properties either internally or externally based on conveniences. Focus on class dropdown and dropdown-menu only.
  2. First focus dropdown which is parent class of dropdown-menu then make it as static in position as follows:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
    .dropdown {
        position:static !important;
    }
    </style>

    chevron_right

    
    

  3. Now, make top margin of dropdown-menu as zero pixel and add width to 100%.
  4. Then add box shadow to highlight the dropdown-menu (decorative purpose) as follows:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
    .dropdown-menu {
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
        margin-top:0px !important;
        width:100% !important;
    }
    </style>

    chevron_right

    
    

  5. We can also use CSS properties through inline method.

Example 1: Below example illustrate how to make a Bootstrap 4 full width dropdown in Navbar using CSS properties.



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>
    <style>
        .dropdown {
            position: static !important;
        }
          
        .dropdown-menu {
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
            margin-top: 0px !important;
            width: 100% !important;
        }
    </style>
</head>
  
<body>
    <div class="fluid-container">
        <center>
            <h1 style="color:green;padding:13px;">
              GeeksforGeeeks
            </h1>
            <b>Bootstrap 4 full width dropdown in Navbar</b>
            <br>
            <br>
            <nav class="navbar navbar-expand-lg navbar-dark
                        justify-content-between text-white"
                 style="background-color: green;">
                <a class="navbar-brand" href="#">
                    <img src=
                         width="30" height="30" 
                         class="d-inline-block align-top" alt=""
                  GfG BS4 Navbar
                </a>
                <button class="navbar-toggler " 
                        type="button" data-toggle="collapse" 
                        data-target="#navbarNavDropdown01" 
                        aria-controls="navbarNavDropdown01"
                        aria-expanded="false" 
                        aria-label="Toggle navigation" 
                        style="outline-color:#fff">
                    <span class="navbar-toggler-icon"></span>
                </button>
  
                <div class="collapse navbar-collapse" 
                     id="navbarNavDropdown01">
  
                    <ul class="navbar-nav ">
                        
                        <!--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 01
                            </a>
                            
                            <!--dropdown sub items of menu-->
                            <div class="dropdown-menu"
                                 aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">
                                  Action 01
                                </a>
                                <a class="dropdown-item" href="#">
                                  Action 02
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">
                                  More Content here 
                                </a>
                            </div>
                        </li>
                        <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 02
                            </a>
                            
                            <!--dropdown sub items of menu-->
                            <div class="dropdown-menu" 
                                 aria-labelledby="navbarDropdown" 
                                 style="max-width: 1366px;">
                                <a class="dropdown-item" href="#">
                                  Action 01
                                </a>
                                <a class="dropdown-item" href="#">
                                  Action 02
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">
                                  More Content here 
                                </a>
                            </div>
                        </li>
                    </ul>
                      
                    <!--Form item of menu for search purpose-->
                    <form class="form-inline ml-auto ">
  
                        <input class="form-control mr-sm-4"
                               type="search" placeholder="Search"
                               aria-label="Search">
                        <button class="btn btn-success my-4 my-sm-2 "
                                type="submit">Search</button>
                    </form>
                </div>
            </nav>
        </center>
    </div>
  
</body>
  
</html>

chevron_right


Output:

Approach 2:

  1. In Bootstrap 4, full width dropdown in Navbar might be possible by using Bootstrap 4 utilities.
  2. Similar to approach 1, focus on class dropdown and dropdown-menu only.
  3. Adding class position-static along with dropdown class, which is the parent class of dropdown-menu as follows:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <li class="nav-item dropdown position-static">

    chevron_right

    
    

  4. Now, add class w-100, mt-0 along with dropdown-menu class as follows:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div class="dropdown-menu mt-0 w-100 shadow border-outline-success" 
    aria-labelledby="navbarDropdown">

    chevron_right

    
    

Example 2: Below example illustrate how to make a Bootstrap 4 full width dropdown in Navbar using Bootstrap 4 utilities.

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>
    <div class="fluid-container">
        <center>
            <h1 style="color:green;padding:13px;">
              GeeksforGeeeks
            </h1>
            <b>Bootstrap 4 full width dropdown in Navbar</b>
            <br>
            <br>
            <nav class="navbar navbar-expand-lg navbar-dark
                        justify-content-between text-white" 
                 style="background-color: blue;">
                <a class="navbar-brand" href="#">
                    <img src=
                         width="30" height="30" 
                         class="d-inline-block align-top" alt=""
                  GfG BS4 Navbar
                </a>
                <button class="navbar-toggler " 
                        type="button"
                        data-toggle="collapse"
                        data-target="#navbarNavDropdown01" 
                        aria-controls="navbarNavDropdown01"
                        aria-expanded="false" 
                        aria-label="Toggle navigation"
                        style="outline-color:#fff">
                    <span class="navbar-toggler-icon"></span>
                </button>
  
                <div class="collapse navbar-collapse"
                     id="navbarNavDropdown01">
  
                    <ul class="navbar-nav ">
                        
                        <!--dropdown item of menu-->
                        <li class="nav-item dropdown position-static">
                            <a class="nav-link dropdown-toggle" 
                               href="#" id="navbarDropdown" 
                               role="button" data-toggle="dropdown" 
                               aria-haspopup="true"
                               aria-expanded="false">
                              Dropdown 01
                            </a>
                            
                            <!--dropdown sub items of menu-->
                            <div class="dropdown-menu mt-0 w-100 
                                        shadow border-outline-success" 
                                 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>
  
                    </ul>
                    
                    <!--Form item of menu for search purpose-->
                    <form class="form-inline ml-auto ">
  
                        <input class="form-control mr-sm-2" 
                               type="search" placeholder="Search"
                               aria-label="Search">
                        <button class="btn btn-primary my-2 my-sm-0 " 
                                type="submit">Search</button>
                    </form>
                </div>
            </nav>
        </center>
    </div>
  
</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.