<!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 "
>
<
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
>
<
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
>
<
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
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
>