Skip to content
GitLab

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

Merged Administrator requested to merge github/fork/zaidjawed/main into main

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>

Produces 131220125-75cef342-d108-442d-811b-25a2ecb679a1

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 131220163-0b761e9f-f518-4d68-bc99-43052cc18992

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.