0

I am newer to Bootsrap 4 and I want to fit the dropdown in div. I have written following code with Bootstrap 4 to implement the above but it doesn't work:

<div class="p-2 bg-info col-md-4">
     <div class="dropdown">
         <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown
         </button>
         <div class="dropdown-menu">
               <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link
               2</a> <a class="dropdown-item" href="#">Link 3</a>
         </div>
    </div>
</div>
Kiran
  • 123
  • 2
  • 10

1 Answers1

0

Use the Bootstrap 4 w-100 utility class on the dropdown-menu, and btn-block to make the button full width...

<div class="p-2 bg-info col-md-4">
     <div class="dropdown">
         <button type="button" class="btn btn-primary btn-block dropdown-toggle" data-toggle="dropdown">
                Dropdown
         </button>
         <div class="dropdown-menu w-100">
               <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link
               2</a> <a class="dropdown-item" href="#">Link 3</a>
         </div>
    </div>
</div>

https://www.codeply.com/go/H1QUpWhQZD

Also see:
How to make width of dropdown-menu equal to width of it's parent in bootstrap 4
How to make a Bootstrap 4 full width dropdown in Navbar?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624