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:
- 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:
<style>.dropdown {position:static !important;}</style> - 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:
<style>.dropdown-menu {box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;margin-top:0px !important;width:100% !important;}</style> - 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.
<!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>
|
Output:
Approach 2:
- 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:
<liclass="nav-item dropdown position-static"> - Now, add class w-100, mt-0 along with dropdown-menu class as follows:
<divclass="dropdown-menu mt-0 w-100 shadow border-outline-success"aria-labelledby="navbarDropdown">
Example 2: Below example illustrate how to make a Bootstrap 4 full width dropdown in Navbar using Bootstrap 4 utilities.
<!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>
|
Output:
Reference: https://getbootstrap.com/docs/4.0/components/navbar/