How can I block a dropdown menu from going to the right in bootstrap CSS

user_13780737 0
Viewed 75

I'm currently using bootstrap 4.0. The dropdown menu is at the top right corner of the screen. When the user clicks on the drop down menu, The menu makes the page expand slightly to the right so it shows white space right next to the nav bar.

This is what it looks like: drop down

This is the code that I'm using:

           <div class="dropdown dropdown-left">
            <button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </button>
            <div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item text-light" href="#">Action</a>
              <a class="dropdown-item text-light" href="#">Another action</a>
            </div>
          </div>
bootstrap-4 css html
3 Answers

Use this code:

<!-- Default dropright button -->
<div class="btn-group dropright">
   <button type="button" class="btn btn-secondary dropdown-toggle" data- 
        toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropright
   </button>
   <div class="dropdown-menu">
   <!-- Dropdown menu links -->
   </div>
</div>
user_44195530

This is how you do that in BS 4:

Documentation

<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>
user_88015990

You need to add the alignment class to the .dropdown-menu instead of the container .dropdown element. And the class to add to right align a menu should be .dropdown-menu-right as mentioned in the docs.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu dropdown-menu-right bg-dark" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item text-light" href="#">Action</a>
    <a class="dropdown-item text-light" href="#">Another action</a>
  </div>
</div>
user_160941810
Related