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 change font color in dropdown navbar when collapsed in bootstrap ?
- How to Align Navbar Items to Center using Bootstrap 4 ?
- How to Align navbar logo to the left screen using Bootstrap ?
- How to align navbar items to the right in Bootstrap 4 ?
- How to Set navbar active class with Bootstrap and AngularJS ?
- Creating Navbar | Vanilla HTML CSS Vs Bootstrap
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
- How to create full width container using bootstrap?
- How to design Responsive card-deck with fixed width in Bootstrap ?
- 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 use bootstrap-select for dropdown ?
- How to make bootstrap version 2 tab dropdown?
- How to create Animated Blur Navbar using CSS?
- How to create an Affix or sticky Navbar ?
- How to set sticky navbar only for first section of page?
- HTML width/height Attribute vs CSS width/height Property
- How to validate if input in input field has full width string only using express-validator ?
- Include Bootstrap in AngularJS using ng-bootstrap
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.