Add align-self: center to buttons for improved rendering in flex containers

[zaidjawed]

Fixes #34833

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

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

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.

[ffoodd]

Feels safe to me, thanks for submitting this :)

[ffoodd]

Please drop the line breaks and comments, this is not needed.

[mdo]

I'm into it!

[wKovacs64]

This was a breaking change. Can't you just apply align-items-center on your flex container instead?

<div class="d-flex flex-row align-items-center">
  <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>

[719media]

Agreed about breaking change. Yes, this makes buttons inside button groups not stretch to fill height under certain circumstances.

[andreas-venturini]

This broke most of the button styles in our application. I strongly suggest highlighting this change more prominently in the Changelog (possibly even mark as a breaking change). This is not what we would've expected of a minor patch release.

Anyway, keep up the good work ✌️

[ffoodd]

@wKovacs64 @719media @andreas-venturini Please open an issue to highlight broken cases, as it seems we missed them. If that's breaking too much, we might revert it.

[andreas-venturini]

@ffoodd done #35126

Thinking about this some more, I think you should consider reverting (I'm not disagreeing with this change per se, it might just be a bit too much for a minor patch release)

[amshkv]

This change was unexpected and broke the part of the interface where the parent was d-flex with align-items-start
Now we need to redefine all btn in this layout.
Especially unexpected for flex-column