【BootStrap】基本的なクラスまとめ

見出し関連

配置関連

.container

固定幅コンテナ

.container-fluid

可変幅コンテナ

.justify-content-end

右側に配置できる。

部品関連

bg-色

背景に色をつける。

text-色

テキストに色を付ける。

リスト関連

list-unstyled

リストスタイルを解除して縦並びのまま左に詰めます。

list-inline(ulに適用)とlist-inline-item(liに適用)

リストスタイルを解除して横並びに表示します。画面に情報を多く表示させたい場合によく使います。

画像関連

img-fluid

親要素のサイズに合わせて画像サイズが変化します。

img-thumbnail

親要素のサイズに合わせて画像サイズが変化しさらに1px幅のボーダーが画像の周りにつきます。

テーブル関連

table table-striped

縞模様のテーブルになります。

table table-hover

マウスオーバーすると色が変わるテーブルになります。

table table-sm

テーブルの余白を少しカットしたコンパクトなテーブルを作ることが可能です。

ボーダー関連

border-色

枠線に色をつけることができる。

rounded

丸く切り抜いた角になります。

rounded-lg

半径の大きい角丸になります。

rounded-circle

画像が丸くなります。

rounded-pill

画像がカプセル型になります。

シャドウ関連

shadow-sm

小さめの影

shadow

標準の影

shadow-lg

大きめの影