カード型のマークアップ

カードのサイズはheightやwidthで指定するよりbootstrapのspacingのutilityを使います。(例:px-5) その方が文章を変更することになった場合など、サイズを書き直さなくてすみ保守性が高まります。

また、カードの中身の文章の要素を上下や左右に対して中央揃えを行うようなCSSはまずutilityが使えないか考えます。spacingのutilityで揃えるのが先に浮かんでしまっていましたが、これでは先述したように、変更することになった時に変更の際に増減した文章の量から生じる元のカードとのサイズの差分の書き直しが面倒になります。なるべくマジックナンバーを使わないようにするということも重要です。また、align-items-center や justify-content-center を使うことはコードを読んだ時に中央揃えをしていることがより簡易に伝わります。

参考文献
https://getbootstrap.jp/docs/4.2/utilities/flex/ external_link