I am creating a dropdown in bootstrap 4. I placed the dropdown-toggle button and dropdown-menu in a div element with class="container" I want the dropdown toggle and dropdown-menu to take full width of its parent element. I wrote this code for that
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<body>
<div class="container">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
dropdown
</button>
<div class="dropdown-menu">
<a href="" class="dropdown-item">one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
<a href="" class="dropdown-item">four</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
The dropdown-toggle button takes up the full width of it's parent div. But, When I clicked on dropdown-toggle button I observed that the dropdown-menu is'nt taking full width. I want the width of drop dropdown-menu to be equal to it's parent width how can I do that? (I tried to use width:inherit; property but that did'nt worked properly)
Just add follow css classs
.dropdown-menu-width {
width: 689px !important //your required width
}
And html snippet like below
<div class="container">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
dropdown
</button>
<div class="dropdown-menu dropdown-menu-width">
<a href="" class="dropdown-item">one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
<a href="" class="dropdown-item">four</a>
</div>
</div>
Live Preview
Hope it solves your problem !!
You don't need extra CSS. Just use the display="static" dropdown option, and the w-100 and position-static class in the dropdown to make it take up 100% of parent width.
<div class="container">
<button class="dropdown-toggle btn-block" data-toggle="dropdown" data-display="static">
dropdown
</button>
<div class="dropdown-menu position-static w-100">
<a href="" class="dropdown-item">one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
<a href="" class="dropdown-item">four</a>
</div>
</div>
https://www.codeply.com/go/5GjATutCBb
Also see: How to make a Bootstrap 4 full width dropdown in Navbar?
You can add min-width: 100% to the dropdown-menu class
dropdown-menu has position:absolute property. So, adding width:100%; will make the dropdown-menu to take full width of the page instead of taking full width of container. To make the dropdown-menu take the width of it's parent element make the parent element's positioning relative. To solve the problem first Add class="position-relative" attribute to the parent element of dropdown-menu. Now add w-100 to the class attribute of the dropdown-menu div.
<div class="container position-relative">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
dropdown
</button>
<div class="dropdown-menu w-100">
<a href="" class="dropdown-item">one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
<a href="" class="dropdown-item">four</a>
</div>
