Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

button size not respected when direct child of div with d-flex

Created by: jclijmans

When placing a button with size classes as direct child of a div with d-flex, size is not respected

<div class="d-flex flex-row">
  <button type="button" class="m-2 btn btn-primary">Default</button>
  <button type="button" class="m-2 btn btn-primary btn-sm">Small</button>
  <button type="button" class="m-2 btn btn-primary btn-md">Medium</button>
  <button type="button" class="m-2 btn btn-primary btn-lg">Large</button>
</div>

produces image

While

<div class="d-flex flex-row">
  <div>
    <button type="button" class="m-2 btn btn-primary">Default</button>
    <button type="button" class="m-2 btn btn-primary btn-sm">Small</button>
    <button type="button" class="m-2 btn btn-primary btn-md">Medium</button>
    <button type="button" class="m-2 btn btn-primary btn-lg">Large</button>
  </div>
</div>

produces image

Not sure if it's a bug, or more likely that I don't understand it properly.

  • Bootstrap 5.1.0
  • Operating system and version (Windows, macOS, Android, iOS) Windows 10 21H1
  • Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser) Microsoft Edge : Version 92.0.902.78 Chrome : Version 92.0.4515.159 Firefox : 91.0.2 (64-bit)