Bootstrapのグリッドシステムでスマホ表示時のみ、オフセットをはさみたい。

Question

分からないこと

Bootstrapのグリッドシステムを使用してます。Railsアプリのデザインでslim形式で使用しています。実現したいことは、スマホサイズになった時に、cardが画面いっぱいにならず、オフセットを挟んで、中央に表示されるようにしたいです。以下のような記述をしましたが、スマホサイズにしても、cardが画面を満たしてしまいます。スマホ画面の時のみoffsetを挟んで表示するようなことは可能でしょうか。

.col-md-4.col-sm-6.col-xs-4.offset-xs-4
  .card.text-black.border-primary.mb-3
    .card-header.bg-transparent.border-primary

Answer 1

自己解決しました。グリッドシステムの理解が不十分でした。

.col-12.col-sm-12.col-md-6.col-lg-4
  .card.border-primary.mb-3
    .card-header.bg-transparent