Bootstrap4でよく利用するクラスの纏め（レイアウト編）

BootstrapはHTML／CSS／JavaScriptから構成される最も有名な CSSフレームワーク です。 WEBページでよく使われるフォーム、ボタン、メニューなどの部品がテンプレートとして用意されおりデザイン性も確保されているため 制作時の手間を省くことができます。

個人でWebサイトの制作をする場合と異なり、チームで制作する場合は一定のコーディングルールに従い、CSSの記述に統一性を持たせることが必要です。

CSSフレームワークを利用することで開発者は決められたコーディングルールに従うことで、手軽で統一性のあるコーディングが可能になります。

あらかじめ用意されたルールの下でWebサイトのデザインコーディングを行うため、オリジナリティを持たせるなどのカスタマイズが難しくはなりますが、CSSで重要とされているメンテナンス性を向上させることが可能です。

Bootstrap 4.2 – 日本語リファレンス

https://getbootstrap.jp/docs/4.2/getting-started/introduction/

ここで紹介するBootstrap4のクラス

• コンテナ (container)
• グリッド (grid)
• フレックス (flex)
• カード (card)

コンテナ (container)

段階的コンテナ

.container は段階的コンテナを生成します。ウィンドウの横幅に応じて段階的に横幅が変動します。xs(～575px)の時は 100%、sm(576～767px)の時は 540px、md(768～991px)の時は 720px、lg(992～1199px)の時は 960px、xl(1200px～)の時は 1140px 固定となります。コンテナはセンタリングされます。

See the Pen bootstrap 4-container1 by Yoshitaka Ise (@isystk) on CodePen.

流動的コンテナ

.container-fluid は流動的コンテナを生成します。ウィンドウの横幅に応じてスムーズに横幅が変動します。

See the Pen bootstrap 4-container2 by Yoshitaka Ise (@isystk) on CodePen.

グリッド (grid)

等幅グリッド

.row や .col を用いて、画面を N個のカラムに等分することができます。

See the Pen bootstrap 4-grid1 by Yoshitaka Ise (@isystk) on CodePen.

カラム指定グリッド

.col-{n} は、画面の横幅を12個のカラムに分割し、そのうちの何個分を使用するかを指定します。下記の例では 6個分、3個分、3個分のカラムに区切って表示します。 カラムの合計が 12 を超える場合は複数行で表示します。

See the Pen bootstrap 4-grid2 by Yoshitaka Ise (@isystk) on CodePen.

マルチデバイス対応

.col-{breakpoint} や .col-{breakpoint}-{n} を用いて、画面の広さに応じて、表示方法を変更することもできます。下記の例では、画面サイズが sm (Small:スマホサイズ)以上の時は 3分割となり、それより小さい場合は縦方向に並びます。

See the Pen bootstrap 4-grid3 by Yoshitaka Ise (@isystk) on CodePen.

.col-{breakpoint}-{n} を用いて、画面サイズに応じてカラムの割合を変更することができます。下記の例では、sm (Small:スマホサイズ)以上の時には 4:4:4 の割合で、md (Medium:タブレットサイズ)以上の場合は 2:8:2 の割合で、sm サイズより小さな場合は縦方向に並びます。

See the Pen bootstrap 4-grid4 by Yoshitaka Ise (@isystk) on CodePen.

.col-xs-{n} は定義されていません。代わりに .col-{n} を使用します。詳細は ブレークポイント を参照してください。

自然幅カラム

.col-auto, .col-{breakpoint}-auto は、カラムの横幅を、カラムの内容に応じた自然な大きさにします。

See the Pen bootstrap 4-grid5 by Yoshitaka Ise (@isystk) on CodePen.

縦方向のアライン(row)

.align-items-* を用いて、行(row)を上寄せ、中央寄せ、下寄せすることができます。

See the Pen bootstrap 4-grid6 by Yoshitaka Ise (@isystk) on CodePen.

縦方向のアライン(カラム)

.align-self-* を用いて、カラム(col)を上寄せ、中央寄せ、下寄せすることができます。

See the Pen bootstrap 4-grid7 by Yoshitaka Ise (@isystk) on CodePen.

横方向のアライン

.justify-content-* を用いることよより、横方向の配置を指定することができます。start は左寄せ、center は中央寄せ、end は右寄せ、around は左右に適度なスペースを入れる、between はカラム間に適度なスペースを入れます。

See the Pen bootstrap 4-grid7 by Yoshitaka Ise (@isystk) on CodePen.

カラム順序

.order-*, .order-{breakpoint}-* を指定することで、カラムを表示する順序を入れ替えることができます。下記の例では、カラムB と カラムC の表示順序を入れ替えて表示しています。* には 1～12 の値を指定することができます。.order-first は最初、.order-last は最後を指定します。

See the Pen bootstrap 4-grid8 by Yoshitaka Ise (@isystk) on CodePen.

オフセット

.offset-{n}, .offset-{breakpoint}-{n} を指定することにより、カラム間に隙間を開けることができます。{n} には 1～11 の値を指定することができます。下記の例では 6 の幅のカラムA と、5 の幅のカラムC の間に 1の幅のオフセットを指定しています。

See the Pen bootstrap 4-grid9 by Yoshitaka Ise (@isystk) on CodePen.

マージン

.mr-{breakpoint}-auto, .ml-{breakpoint}-auto は左側や右側に最大限のマージンをとります。mr は Margin Right を、ml は Margin Left を意味します。

See the Pen bootstrap 4-grid10 by Yoshitaka Ise (@isystk) on CodePen.

入れ子

下記の様に、グリッドを入れ子にすることも可能です。

See the Pen bootstrap 4-grid11 by Yoshitaka Ise (@isystk) on CodePen.

ガーター無し

.no-gutters を指定すると、カラムのガーター(左右のパディング)を無くすことができます。.row に設定されていた -15px のマイナスマージンも削除されるため、全体の横幅は短くなります。

See the Pen bootstrap 4-grid12 by Yoshitaka Ise (@isystk) on CodePen.

フレックス (flex)

フレックス

.d-flex, .d-{breakpoint}-flex は子要素をフレックスアイテムとして配置します。.d-inline-flex, .d-{breakpoint}-inline-flex はインライン要素として配置します。

See the Pen bootstrap 4-flex1 by Yoshitaka Ise (@isystk) on CodePen.

方向

.flex-row や .flex-column はフレックスアイテムを並べる方向を制御します。

• .flex-row : 左から右方向
• .flex-{breakpoint}-row : 左から右方向
• .flex-row-reverse : 右から左方向
• .flex-{breakpoint}-row-reverse : 右から左方向
• .flex-column : 上から下方向
• .flex-{breakpoint}-column : 上から下方向
• .flex-column-reverse : 下から上方向
• .flex-{breakpoint}-column-reverse : 下から上方向

See the Pen bootstrap 4-flex2 by Yoshitaka Ise (@isystk) on CodePen.

均等配置

.justify-content-{start|end|center|between|around} や .justify-content-{breakpoint}-{start|end|center|between|around} はフレックスアイテムを均等配置します。

See the Pen bootstrap 4-flex3 by Yoshitaka Ise (@isystk) on CodePen.

縦方向の配置

.align-items-{start|end|center|baseline|stretch} や .align-items-{breakpoint}-{start|end|center|baseline|stretch} はフレックスアイテムの縦方向の配置を指定します。

See the Pen bootstrap 4-flex4 by Yoshitaka Ise (@isystk) on CodePen.

.align-self-{start|end|center|baseline|stretch} や .align-self-{breakpoint}-{start|end|center|baseline|stretch} は個々のフレックスアイテムの縦方向の配置を指定します。

See the Pen bootstrap 4-flex5 by Yoshitaka Ise (@isystk) on CodePen.

Fill

.flex-fill や .flex-{breakpoint}-fill はフレックスアイテムを横方向一杯に引き延ばします。引き延ばしの割合はコンテンツによって変わります。

See the Pen bootstrap 4-flex6 by Yoshitaka Ise (@isystk) on CodePen.

伸縮

.flex-grow-1, .flex-{breakpoint}-1 は指定したフレックスアイテムを引き延ばします。.flex-grow-0, .flex-{breakpoint,}-0 は引き延ばしません。

See the Pen bootstrap 4-flex7 by Yoshitaka Ise (@isystk) on CodePen.

.flex-shrink-0, .flex-{breakpoint}-shrink-1 は指定したフレックスアイテムを縮小します。.flex-shrink-0, .flex-{breakpoint}-shrink-0 は縮小しません。

See the Pen bootstrap 4-flex8 by Yoshitaka Ise (@isystk) on CodePen.

左右のマージン

.mr-auto は右側に、.ml-auto は左側に最大限のマージンをつけます。

See the Pen bootstrap 4-flex9 by Yoshitaka Ise (@isystk) on CodePen.

改行

下記はフレックスアイテムの改行を制御します。

• .flex-nowrap : 改行しない
• .flex-wrap : 改行する
• .flex-wrap-reverse : 逆方向に改行する
• .flex-{breakpoint}-nowrap : 改行しない
• .flex-{breakpoint}-wrap : 改行する
• .flex-{breakpoint}-wrap-reverse : 逆方向に改行する

See the Pen bootstrap 4-flex10 by Yoshitaka Ise (@isystk) on CodePen.

順序

.order-{n} や .order-{breakpoint}-{n} はフレックスアイテムを表示する順序を指定します。n には 1～12 の値を指定できます。.order-first, .order-last は一番最初、一番最後に配置します。

See the Pen bootstrap 4-flex11 by Yoshitaka Ise (@isystk) on CodePen.

縦方向の配置

.align-content-{start|center|end|between|around|stretch} は、フローコンテンツの縦方向の配置を指定します。

See the Pen bootstrap 4-flex12 by Yoshitaka Ise (@isystk) on CodePen.

カード (card)

カード

.card は、フレキシブルで拡張可能なコンテンツコンテナであるカードを表示します。.card-img-*, .card-body, .card-title, .card-subtitle, .card-text, .card-link は、画像、本文、タイトル、サブタイトル、テキスト、リンクを表示します。

See the Pen bootstrap 4-card1 by Yoshitaka Ise (@isystk) on CodePen.

カードヘッダ・フッタ

.card-header, .card-footer は、カードのヘッダやフッタを表示します。

See the Pen bootstrap 4-card2 by Yoshitaka Ise (@isystk) on CodePen.

ナビゲーション

カードヘッダでナビゲーションタブを使用する場合は .card-header-tabs を指定します。

See the Pen bootstrap 4-card3 by Yoshitaka Ise (@isystk) on CodePen.

イメージオーバーレイ

.card-img, .card-img-overlay は、カードのタイトルやテキストをカードの画像に重ねて表示します。

See the Pen bootstrap 4-card4 by Yoshitaka Ise (@isystk) on CodePen.

カードグループ

.card-group は、複数のカードを横に並べたカードグループを表示します。Sample

See the Pen bootstrap 4-card5 by Yoshitaka Ise (@isystk) on CodePen.

カードデッキ

.card-deck は、複数のカードを横に隙間を開けて並べたカードデッキを表示します。

See the Pen bootstrap 4-card6 by Yoshitaka Ise (@isystk) on CodePen.

カードカラム

.card-columns は、カードをカラム表示します。カラム数は画面の幅によって適度に変化しますが、CSS の columns を指定することにより変更可能です。

See the Pen bootstrap 4-card7 by Yoshitaka Ise (@isystk) on CodePen.