dropdownbootstrap-5

Resizing dropdown-item

I am new to Bootstrap, currently building a dropdown list of country flags to switch languages on a small static website (single page). I could not find a way to resize the dropdown items in the list, and they appear too big at the moment. What is the best way to control the size of dropdown items?

The code is below, and the result is attached...


<div class="dropdown">
    <button class="btn btn-sm bg-dark btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
         <svg>…</svg><b> EN</b>
     </button>
     <ul class="dropdown-menu">
         <li><button class="dropdown-item btn btn-sm" onclick="location.href='index-en.html';">
                 <svg>…</svg><b> FR</b>
              </button>
         </li>
      </ul>
</div>

I tried to override css as follows but I’m probably doing it wrong?


.dropdown-menu {
  min-width: 0;
}

.dropdown-item {
  width: 100%;
}

dropdown

Solution

  • This code should be sufficient to solve your issue.

        .dropdown-menu {
        min-width: auto;
    }