削除ボタンをBootstrap5（ベータ版）で装飾（スタイル変更）したい

Question

質問お願いします。

現在Laravelで日記アプリを作っていて、ボタンの部分をBootstrapでスタイル変更したいと考えています。

「詳細を表示」ボタンと「編集する」ボタンについてはスタイルが反映されていますが、「削除する」ボタンのところだけなぜか反映されません（削除なのでFormタグを設定しています）。

＊反映させたいのは、<li class="list-group-item d-grid gap-2">の中のd-grid gap-2になります。

色々と試したのですが変更しないので、分かる方いましたらご教授お願いします。

＊使用しているのは、Bootstrap5のベータ版になります

<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item d-grid gap-2"><a class="btn btn-light btn-sm" href="/posts/{{ $post->id }}" type="button">詳細を表示</a></li>
    <li class="list-group-item d-grid gap-2"><a class="btn btn-light btn-sm" href="/posts/{{ $post->id }}/edit" type="button">編集する</a></li>

    <li class="list-group-item d-grid gap-2">　←この部分です
      <form action="/posts/{{ $post->id }}" method="post">
        {{ csrf_field() }}
        <input type="hidden" name="_method" value="delete">
        <input type="submit" class="btn btn-danger btn-sm" name="" value="削除する">
      </form>
    </li>

  </ul>
</div>

参考画像↓

Comments

[m.ts10806]

反映されているボタンと同じクラスをコピペしても反映されませんか？

[nakatievent]

<li class="list-group-item d-grid gap-2">
<input type="submit" class="btn btn-danger btn-sm d-grid gap-2" name="" value="削除する" >

↑上記のようにしても反映されません。

[m.ts10806]

あれごめんなさい
ボタン自身かと思いこんでました。
liのほうですね

[nakatievent]

<li>の方です????‍♂️

ボタンの色は反映されているのですが、<d-grid gap-2>だけが反映されていない状態です。

[m.ts10806]

ん、でもない？
ボタンのdangerが効いてない？
ひとまず、現在の画面キャプチャ提示してもらえますか？
百聞は一見にしかず

[nakatievent]

少々お待ちください。

[nakatievent]

添付しました！
削除するボタンになります。

[m.ts10806]

bootstrap5ですね。4にはない機能使われてます。
質問本文に5のどれか（alpha,betaとか出てるので）も追記願います。

[nakatievent]

↑追記しました。

Answer 1

直下にしか影響されないようで、デベロッパツールで確認するとformはその幅になっています。
formに.d-grid .gap-2を付与すると同じようになるはずです。

Comments

[nakatievent]

直りました！！
ありがとうございます????
もし宜しければ一つ教えてほしいのですが、直下にしか影響されないってどうやって分かったのですか？

[m.ts10806]

ブラウザデベロッパツールでの確認とドキュメントです。

[nakatievent]

ドキュメントのどこに書いてあるか教えて頂けると助かります????‍♂️

[m.ts10806]

d-gridとボタンのことが書いてあるのは１箇所しかないのでサイト内検索すぐ見つかると思います。

[nakatievent]

ありがとうございます。