クルーデザイン

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 ブロック要素の左寄せ・右寄せ・中央寄せ(センタリング)

Bootstrap4では、ブロック要素の左寄せ・右寄せ・中央寄せができるクラスが用意されています。 そのクラスを追加することで、ブロック要素を寄せることができます。 サンプルも作りました。 ブロック要 …

Bootstrap4 画面幅一覧表 ブレークポイント確認

Bootstrap4 画面幅一覧表 Bootstrap4のブレークポイントを覚えられないのでメモしておきます。 xsやxlはあまり使わない気がしますね。 実際はPCとモバイルの2種類しか作らない人が多 …

Bootstrap4 上部固定メニューヘッダを作るサンプル(fixed-top)

スマホ用のサイトを作成するときに固定メニューはよく使いますよね。 Bootstrap4でもクラスを追加するだけで固定メニューを作ることができます。 サンプルも作ってますので参考になると嬉しいです。 H …

Bootstrap4 PCとスマホで画像を切り替える方法

レスポンシブサイトでPC用画像とスマホ用画像を切り替えたい場合が多々あります。 Bootstrap4ではクラスを指定するだけで実現可能です。 便利ですね! 例えば画面サイズが「md〜xl」の時はPC用 …

Bootstrap4 画像用クラスまとめ

Bootstrap4の画像で使用できる基本的なクラスをまとめました。 各クラスはimgタグに付加するだけで効果が発揮されます。 基本的なクラスは以下の4種類です。 Bootstrap4 画像用クラス …


comment

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