.btn-group-sm does not work with dropdown in Bootstrap 5.3.3

[vtofeliuk]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

In Bootstrap 5.3.3, when using the btn-group-sm class with a button group that includes a dropdown, the small size class does not apply to the buttons and dropdown correctly. As a result, the dropdown button does not scale down properly, while the rest of the buttons do. This issue can be observed with standard markup for button groups and dropdowns.

Please see the screenshots:

Reduced test cases

https://getbootstrap.com/docs/5.3/components/button-group/
https://stackblitz.com/edit/8fqjnj?file=index.html

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome, Safari

What version of Bootstrap are you using?

5.3.3

[julien-deramond]

Hello @vtofeliuk
It's maybe not that explicit in the documentation, but it's mentioned in Button group > Sizing:

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.

In your case, it would mean adding a .btn-group-sm to the nested .btn-group:

<div class="btn-group btn-group-sm" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

-  <div class="btn-group" role="group">
+  <div class="btn-group btn-group-sm" role="group">
    <button
      type="button"
      class="btn btn-primary dropdown-toggle"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      Dropdown
    </button>
    <ul class="dropdown-menu" style="">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>