How to Design Full Width Dropdown Navbar using Bootstrap?
Last Updated :
26 Jun, 2024
A full-width dropdown navbar is a popular design element in modern web development, providing a responsive and user-friendly navigation experience. Using Bootstrap, a powerful front-end framework, simplifies the creation of such a navbar with its built-in classes and responsive grid system. This guide will demonstrate how to design a full-width dropdown navbar using Bootstrap, ensuring it is both aesthetically pleasing and functional across various devices and screen sizes.
Below are the approaches to design full width dropdown navbar using Bootstrap:
By adding external CSS
- 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.
- 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).
- We can also use CSS properties through inline method.
Example: Below example illustrate how to make a Bootstrap 4 full width dropdown in Navbar using CSS properties.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
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:
By using Bootstrap internal class
- In Bootstrap, full width dropdown in Navbar might be possible by using Bootstrap 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.
- Now, add class w-100, mt-0 along with dropdown-menu class.
Example: Below example illustrate how to make a Bootstrap full width dropdown in Navbar using Bootstrap utilities.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
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:
Similar Reads
How to create a form within dropdown menu using Bootstrap ? A Dropdown menu is used to allow the user to choose the content from the menu as per their requirement and it is used to save screen space and avoid the long scrolling of the web pages. In web design, we often come in a scenario where we need to create a form within the dropdown menu to get some use
3 min read
How to create full width container using bootstrap? Bootstrap offers two types of containers: fixed-width containers and full-width, fluid containers. The container-fluid class is used to create a full-width container that spans the entire width of the viewport, adjusting dynamically as the viewport size changes.Container Types in BootstrapFixed-Widt
3 min read
How to design a dropdown menu using pure CSS ? The Dropdown Menu is a common UI pattern that we have seen on the web nowadays. It is useful in displaying related information in pieces without overwhelming the user with buttons, texts, and options. Most of the time it is seen inside the navigation bar or headers of websites. With the help of Pure
3 min read
How to use bootstrap-select for dropdown? Bootstrap Select is a form control that shows a collapsible list of different values that can be selected. This can be used for displaying forms or menus to the user.ApproachThere are only some style properties that can be applied to the <option> component. This is because this sort of compone
2 min read
How to create full width container in bootstrap5? Bootstrap containers are content holders that are used to align, add margins and padding to your content. Bootstrap has three different container classes, namely: .container .container-fluid .container-{breakpoint} Width of a container varies in accordance with its class. We can create a full width
1 min read
How to make bootstrap version 2 tab dropdown? Using a simple Bootstrap plug-in, you can add dropdown menu in tabs by using the dropdown class. The nav and nav-tabs classes are also used to achieve this. First, make an unordered list and give it a class of nav and nav-tabs. Now, give a class of dropdown to the list item tag which you wish to beh
3 min read