Bootstrap チートシート
検索・印刷できる Bootstrap 5.3 リファレンス——グリッド、余白、タイポグラフィ、色、フレックスユーティリティ、ボタン、フォーム、コンポーネント。無料。
グリッドとレイアウト
12<div class="container">
固定幅レスポンシブコンテナ
<div class="container-fluid">
全ブレークポイントで全幅のコンテナ
<div class="container-md">
mdブレークポイントまで幅100%
<div class="row">
グリッド行、カラムを保持
<div class="col">
等幅の自動カラム
<div class="col-6">
12カラム中6カラムを占有
<div class="col-md-4">
mdブレークポイント以上で4カラム
<div class="col-auto">
内容に合わせたサイズのカラム
<div class="offset-md-2">
カラムを右に2カラム分押し出す
<div class="row g-3">
カラム間のガター間隔
<div class="row row-cols-3">
1行に等幅3カラムを強制
<div class="order-2">
flex/gridカラムを並べ替え
スペーシングユーティリティ
12m-3
全方向のマージン(スケール0-5)
mt-2
上マージン
mx-auto
中央寄せの自動水平マージン
p-4
全方向のパディング
py-2
垂直方向のパディング(上下)
ms-3
開始側マージン(LTRで左、RTL対応)
me-3
終了側マージン(LTRで右、RTL対応)
ps-2
開始側パディング、RTL対応
pe-2
終了側パディング、RTL対応
gap-3
flex/gridアイテム間のギャップ
m-n1
負のマージン
p-md-5
md以上のレスポンシブパディング
タイポグラフィ
14<h1>..<h6>
デフォルトスタイルの見出しレベル
<p class="display-1">
大きな表示見出し (display-1..6)
<p class="lead">
目立つリード段落
fw-bold
太字のフォントウェイト
fw-semibold
セミボールドのフォントウェイト
fst-italic
斜体のフォントスタイル
text-center
テキストを中央揃え
text-start
テキストを開始側揃え、RTL対応
text-end
テキストを終了側揃え、RTL対応
text-truncate
あふれを省略記号で切り詰め
text-uppercase
テキストを大文字に変換
fs-1
レスポンシブフォントサイズ (fs-1..6)
lh-base
基本の行間 (lh-1, lh-sm, lh-lg)
font-monospace
等幅フォントファミリー
色と背景
10text-primary
プライマリのテキスト色
bg-primary
プライマリの背景色
bg-primary-subtle
控えめなプライマリ背景の色味
text-primary-emphasis
強調プライマリテキスト、テーマ対応
text-bg-primary
自動コントラストテキスト付きプライマリ背景
link-primary
色付きリンクヘルパー
bg-opacity-50
背景の不透明度50%を適用
text-body-secondary
控えめなセカンダリ本文テキスト
text-body-emphasis
高強調の本文テキスト
border-primary-subtle
控えめなプライマリのボーダー色
Flexユーティリティ
10d-flex
フレックスコンテナを作成
flex-row
アイテムを横方向に配置
flex-column
アイテムを縦方向に配置
justify-content-between
主軸に沿ってアイテムを配置
align-items-center
交差軸でアイテムを中央揃え
flex-wrap
アイテムの折り返しを許可
flex-grow-1
アイテムを伸ばして空間を埋める
flex-fill
等しい可変幅を強制
align-self-end
単一アイテムを終端に揃える
flex-md-row
md以上のレスポンシブflex方向
表示と配置
12d-none
要素を非表示
d-md-block
mdブレークポイント以上でblock表示
position-relative
相対配置
position-absolute
絶対配置
position-fixed
固定配置
position-sticky
スティッキー配置
top-0 start-0
左上に固定、RTL対応
translate-middle
transform translateで中央配置
fixed-top
要素をビューポート上部に固定
sticky-top
スクロール時に上部に固定
z-3
z-indexを設定 (z-0..3)
invisible
非表示にするがレイアウト領域は保持
サイズとボーダー
12w-100
親の幅100%
w-50
親の幅50%
h-100
親の高さ100%
mw-100
最大幅100%
vh-100
ビューポートの高さ100%
border
全方向にデフォルトボーダーを追加
border-0
全ボーダーを削除
border-primary
ボーダーに色を付ける
rounded
デフォルトの角丸
rounded-pill
完全な丸みのピル形状
rounded-circle
円形の角丸
shadow-sm
小さなボックスシャドウ (shadow, shadow-lg)
ボタン
9<button class="btn btn-primary">
塗りつぶしプライマリボタン
<button class="btn btn-outline-primary">
アウトラインボタンのバリアント
<button class="btn btn-lg">
大きなボタン (btn-smもあり)
<button class="btn btn-link">
リンク風のボタン
<button class="btn-close">
汎用の閉じる(×)ボタン
<button class="btn disabled">
無効状態のボタン
<button class="btn active">
アクティブ状態のボタン
<div class="d-grid"><button class="btn">
d-gridによる全幅ブロックボタン
<div class="btn-group">
ボタンをまとめてグループ化
フォーム
11<input class="form-control">
スタイル付きテキスト入力
<label class="form-label">
フォームフィールドのラベル
<select class="form-select">
スタイル付きセレクトドロップダウン
<div class="form-check">
チェックボックス/ラジオのラッパー
<input class="form-check-input">
スタイル付きチェックボックスまたはラジオ入力
<div class="form-check form-switch">
トグルスイッチコンポーネント
<input class="form-control-lg">
大きな入力 (form-control-smもあり)
<div class="input-group">
アドオン付きで入力をグループ化
is-invalid
無効なバリデーション状態 (is-valid)
<div class="form-floating">
フローティングラベル入力
col-form-label
横並びフォーム用に整列したラベル
コンポーネント
14<div class="card">
柔軟なコンテンツカード
<nav class="navbar navbar-expand-lg">
レスポンシブナビゲーションバー
data-bs-toggle="modal" data-bs-target="#m"
モーダルダイアログを起動
data-bs-toggle="dropdown"
ドロップダウンメニューを切り替え
data-bs-toggle="collapse"
折りたたみ要素を切り替え
<div class="accordion">
積み重ねた折りたたみパネル
<div class="alert alert-dismissible">
閉じられるアラートメッセージ
<span class="badge text-bg-primary">
小さなカウントまたはラベルバッジ
<ul class="list-group">
スタイル付き項目リスト
<ul class="nav nav-tabs">
タブ式ナビゲーション
<div class="toast">
軽量なトースト通知
<div class="offcanvas">
オフキャンバスのサイドバーパネル
<div class="spinner-border">
読み込みスピナーインジケータ
<nav><ul class="pagination">
ページ送りナビゲーションリンク
ヘルパーとその他
11data-bs-theme="dark"
スコープにダークカラーモードを有効化
<div class="ratio ratio-16x9">
レスポンシブなアスペクト比ボックス
visually-hidden
視覚的に非表示、スクリーンリーダー用に保持
visually-hidden-focusable
フォーカスまで非表示(スキップリンク)
stretched-link
親全体をクリック可能にする
clearfix
フロートした子をクリア
<div class="vstack gap-2">
要素の垂直スタック
<div class="hstack gap-2">
要素の水平スタック
<a class="icon-link">
インラインアイコンと揃えたリンク
<div class="progress">
プログレスバーのコンテナ
<nav class="breadcrumb">
パンくずナビゲーション
「:q」に一致する項目はありません。
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。