Created by: zaidjawed
Fixes #34833 (closed)
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>
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>
Solution:
According to W3Schools the default value of align-items is stretch which might be causing this issue.
I simply added align-self to center to give a default value to center if the buttons are a direct child of flex.