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のクラス

スペーシング (spacing)
サイジング (sizing)
テキスト (text)
フロート (float)
クリアフィクス (clearfix)
リストグループ (list group)
イメージ (image)
ディスプレイ (display)
ポジション (position)

スペーシング (spacing)

.m{t|r|b|l|x|y}-{n}, .p{t|r|b|l|x|y}-{n}, .m{t|r|b|l|x|y}-{breakpoint}-{n}, .p{t|r|b|l|x|y}-{breakpoint}-{n} は、マージンやパディングを指定します。一文字目はマージンかパディングかを指定します。

m : margin
p : padding

2文字目は方向を示します。

t : top
r : right
b : bottom
l : left
x : top および bottom
y : right および left
(なし) : 四方向

{breakpoint} には下記を指定します。

(なし) : xs サイズ以上
sm : sm 以上
md : md 以上
lg : lg 以上
xl : xl 以上

{n} には 0～5 の値、または auto を指定できます。n0～n5 はマイナスの値を示します。

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

サイジング (sizing)

.w-{25|50|75|100} は、25%, 50%, 75%, 100% の横幅を指定します。.w-auto は横幅を自動算出します。

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

.h-{25|50|75|100} は、25%, 50%, 75%, 100% の高さを指定します。.w-auto は高さを自動算出します。

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

.mw-100 などは、下記のスタイルシートを指定します。

.mw-100 : max-width : 100% !important;
.mh-100 : max-height : 100% !important;
.vw-100 : width : 100vw !important;
.vh-100 : height : 100vh !important;
.min-vw-100 : min-width : 100vw !important;
.min-vh-100 : min-height : 100vh !important;

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

テキスト (text)

両端揃え

.text-justify は、単語間に適度なスペースを入れることにより、行の両端を揃えます。

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

左寄せ、中央寄せ、右寄せ

.text-left, .text-center, .text-right はそれぞれ、テキストを左寄せ、中央寄せ、右寄せします。

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

.text-{sm|md|lg|xl}-{left|center|right} の形式は、それぞれ、SM(Small)サイズ以上、MD(Medium)サイズ以上、LG(Large)サイズ以上、XL(Extra Large)サイズ以上の時のみ、左寄せ、中央寄せ、右寄せします。

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

改行無し

.text-nowrap はテキストの自動改行を禁止します。.text-wrap は自動改行を許可します。

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

切り詰め

.text-truncate ははみ出すテキストを切り詰め、代わりに … を表示します。要素には .d-block (display:block) または .d-inline-block (display:inline-block) を指定しておく必要があります。

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

大文字化・小文字化

.text-lowercase はテキスト全体を小文字に、.text-uppercase は大文字に、.text-capitalize は各単語の先頭文字を大文字に変換して表示します。

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

文字の太さとイタリック体

.font-weight-{ bold | bolder | normal | light | lighter } はフォントの太さを太字、通常、細字にします。.font-italic はフォントをイタリック体にします。

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

等幅フォント

.text-monospace は、モノスペース(等幅)フォントを指定します。

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

リセット

.text-reset は、テキストの色をリセットします。

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

装飾無し

.text-decoration-none は、テキストの装飾をなくします。

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

フロート (float)

.float-{left|right|none} や .float-{breakpoint}-{left|right|none} は、CSS の float を使用してテキストの回り込みを制御します。回り込みを解除するにはクリアフィックス (.clearfix) を用います。

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

クリアフィクス (clearfix)

.float-left や .float-right を使用した場合、そのままではテキストの回り込みが継続してしまうため、親要素に対して .clearfix を指定して、.float-* の効力をクリアします。

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

リストグループ (list group)

リストグループ

.list-group はリストグループを、.list-group-item はその要素を表示します。

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

アクティブ・無効化

.active はアクティブな要素を、.disabled は無効化された要素を示します。

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

リンク・ボタン

<li> の代わりに <a> や <button> で押下可能なリストグループを構成することもできます。

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

フラッシュ

.list-group-flush はボーダーの無いリストグループを表示します。

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

コンテキスト

.list-group-item-* でコンテキストに応じた色の要素を表示します。

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

タブ切り替え

.tab-content, .tab-pane を用いて、メニューに応じて内容を切り替えることができます。.fade はコンテンツをフェードイン・フェードアウトします。

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

イメージ (image)

レスポンシブイメージ

<img> に対して .img-fluid を指定すると、ウィンドウの広さに応じて自動的に横幅が調整されるレスポンシブ画像とすることができます。

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

イメージサムネイル

.img-thumbnail を指定すると、画像の周りに .25rem の枠線を描画します。

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

ディスプレイ (display)

ディスプレイ

.d-{value} の形式は、要素を {value} の値に応じて描画します。.d-{sm|md|lg|xl}-{vlaue} の形式は、画面サイズに応じて描画方法を変更します。{value} には下記を指定できます。

none : 描画しない
inline : インライン要素として描画する
inline-block : インラインブロック要素として描画する
block : ブロック要素として描画する
table : テーブル要素として描画する
table-row : テーブルの行として描画する
table-cell : テーブルのセルとして描画する
flex : フレックス要素として描画する
inline-flex : インラインフレックス要素として描画する

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

印刷時の表示方法

.d-print-{value} や .d-{breakpoint}-print-{value} の形式は、印刷時の表示方法を指定します。

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

ポジション (position)

ポジション

.position-{static|relative|absolute|fixed|sticky} は、CSS の position を指定します。

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

スティッキー

.sticky-top は、CSS の position: sticky を用いて、スクロール時にブラウザの上部に張り付くコンテンツを表示します。IE10 や IE11 ではサポートされていません。

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