クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

Bootstrap4

Bootstrap4 PCでは2カラムで、スマホ画面では1カラム(サンプル)

投稿日:

Bootstrap4で画面サイズによってレイアウトのカラム数を変えたい場合のサンプルを作成しました。

画面サイズに対応したクラスを追加してあげるだけで、簡単に実現可能です。
サンプルを作成しましたので、良ければ見ていってくださいね。

PCでは2カラムで、スマホ画面では1カラム(サンプル)

「col-md-6」クラスで「768px〜991px」のときに2カラムになります。
「col-sm-12」クラスで「576px〜767px」のときに1カラムになります。

指定していないサイズのときは、Bootstrap4が自動で調整してくれます。
もし、希望のカラムになっていないときは明示的にカラムを指定してあげましょう。

名称 領域サイズ
xs 0px〜575px
sm 576px〜767px
md 768px〜991px
lg 992px〜1199px
xl 1200px〜

 

サンプルも載せておきますね。

See the Pen Bootstrap4 PCでは2カラムで、スマホ画面では1カラム(サンプル) by clue-design (@clue-design) on CodePen.0

コード変更や、大きな画面でみたい場合はこちらから。

-Bootstrap4

執筆者:

関連記事

Bootstrap4 画像を全画面に表示(レスポンシブでwidth100%)

メインビジュアルを画面幅すべてを使って表示させたい時があります。 Bootstrap4では、以下のように簡単に実現可能です。 HTML Bootstrap4 画像を全画面に表示(レスポンシブでwidt …

Bootstrap4 カラムを途中でブレークする(途中で折り返すクラスw-100)

Bootstrap4のcolクラスは何もしなくても隙間をどんどん埋めていってくれる便利なものです。 しかし、実現したいデザインによっては途中で折り返したいことも出てくると思います。そんな場合は「w-1 …

Bootstrap4 レイアウトの基本

Bootstrapについて レスポンシブサイトを制作する時の心強い味方がCSSフレームワークです。 CSSフレームワークがあると短時間で簡単にレスポンシブサイトが制作できます。 その代表格と言えばTw …

Bootstrap4 divに影(シャドウ)を付ける(影付きのdiv・ボックス)

Bootstrap4では、影(シャドウ)を付けるクラスが初めから用意されています。 クラスを追加するだけで簡単に影(シャドウ)を付けることができます。 Bootstrap4 divに影(シャドウ)を付 …

Bootstrap4 colの隙間(padding、margin)を削除する(サンプル付き)

Bootstrap4でデザインを忠実に再現したい時に、colの隙間(padding)が邪魔なときがあります。 この邪魔な隙間を無くしてしまおう!というのが今回の趣旨です。 サンプルも作りました。 CS …


comment

メールアドレスが公開されることはありません。