Bootstrap4「card」デモ

通常のBootstrap4コード

Card image cap

Card title

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

Card image cap

Card title

夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。

Card image cap

Card title

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。


修正方法1
Bootstrap4コード + クラス「d-block」を追加

Card image cap

Card title

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

Card image cap

Card title

夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。

Card image cap

Card title

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。


修正方法2
Bootstrap4コード + CSS「card-img-top」にコード追加

Card image cap

Card title

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

Card image cap

Card title

夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。

Card image cap

Card title

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。