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:
- 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.
- First focus dropdown which is parent class of dropdown-menu then make it as static in position as follows:
- Now, make top margin of dropdown-menu as zero pixel and add width to 100%.
- Then add box shadow to highlight the dropdown-menu (decorative purpose) as follows:
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
- 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.
- In Bootstrap 4, full width dropdown in Navbar might be possible by using Bootstrap 4 utilities.
- Similar to approach 1, focus on class dropdown and dropdown-menu only.
- Adding class position-static along with dropdown class, which is the parent class of dropdown-menu as follows:
"nav-item dropdown position-static"
- Now, add class w-100, mt-0 along with dropdown-menu class as follows:
"dropdown-menu mt-0 w-100 shadow border-outline-success"
Example 2: Below example illustrate how to make a Bootstrap 4 full width dropdown in Navbar using Bootstrap 4 utilities.
- How to Set navbar active class with Bootstrap and AngularJS ?
- How to remove arrow in dropdown in Bootstrap ?
- How to open dropdown menu on hover in Bootstrap ?
- How to replace dropdown-toggle icon with another default icon in Bootstrap ?
- How to configure modal width in Bootstrap?
- How to change the width and height of Twitter Bootstrap's tooltips?
- How Specify Length and Width of Square Grid Picture System in Bootstrap?
- How to create an Affix or sticky Navbar ?
- HTML width/height Attribute vs CSS width/height Property
- How to style a dropdown using CSS?
- How to clear all options in a dropdown box?
- Include Bootstrap in AngularJS using ng-bootstrap
- How to display div elements using Dropdown Menu in jQuery?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.