HTMLタグ別のbootstrap5のサンプル

breakpoint
sm
具体的にはcontainer のサイズを限定する
sm スマートフォン(横持ち)など 576px 以上から
breakpoint
sm
sm maxは576px以下に適用される(小数点.98)
breakpoint
md
md タブレット端末など 768px 以上から
breakpoint
md
md タブレット端末など 768px 以上から
breakpoint
lg
lg ノート PC など 992px 以上 から
breakpoint
lg
lg ノート PC など 992px 以上から
breakpoint
xl
xl デスクトップ PC 1200px 以上から
breakpoint
xl
xl デスクトップ PC 1200px 以上から
breakpoint
xll
xl デスクトップ PC 1400px 以上から
breakpoint
xll
xl デスクトップ PC 1200px 以上から
breakpoint
reduce
ユーザがデバイス上でアニメーションを制御を設定している場合に反応する
class
margin
マージン自動化
class
nav
1行のカラムという位置づけになる
class
nav
ピル型ナビゲ―ション項目の幅を調整
class
nav
ピル型ナビゲ―ション項目の幅を調整(収める)
class
navbar
テキスト文字と背景色
class
navbar
row nowrapで画面の大きさに応じた対応
id
navbar
navはnavbar(グローバルメニュー)
class
row
row 
1行ブロック tableのtrと同じ
class
row
垂直中央寄せ
class
row
垂直下寄せ
class
row
垂直↑寄せ
class
row
水平等間隔
class
row
水平左右
class
row
水平センター
class
row
水平左寄せ
class
row
水平右寄せ
class
row
行間なし
class
col
col 
カラムで12分割の数字不要、自動調整
class
col
2/12の幅の割り当て
class
col
半分の幅の割り当て、mdなら4/12の幅の割り当て
class
col
smなら6を割り当てる
class
col
col-smを使うと、768px以上の画面サイズ(タブレット)に適用される
class
col
smとmdで設定する
class
col
md以上でオフセットクリアー
class
col
垂直中央寄せ
class
col
垂直上寄せ
class
col
垂直下寄せ
class
col
カラム表示順
class
col
最初に表示
class
col
幅を自動調整する
class
col
col-mdを使うと、992px以上の画面サイズに適用される
class
col
mdはノートPCを想定
class
col
mdは4でmlはauto
class
col
オフセット
class
col
文字の長さで可変する
class
col
lgは大画面PC
class
flex
flex
class
flex
cssのflexboxを使いfloatから解放される
class
flex
均等割り表示
class
flex
左右寄せ表示
class
flex
中央寄せ表示
class
flex
右寄せ表示
class
flex
左寄せ表示
class
flex
縦、均等割り(高さ固定前提)
class
flex
縦、上下寄せ(高さ固定前提)
class
flex
縦、中央寄せ(高さ固定前提)
class
flex
縦、下寄せ(高さ固定前提)
class
flex
縦、上寄せ(高さ固定前提)
class
flex
縦、高さに自動調整(高さ固定前提)
class
flex
コンテンツ内が置くものがアイテム
class
flex
中央寄せ表示
class
flex
左寄せ
class
flex
右寄せ
class
flex
全幅で調整する(ストレッチ)
class
flex
いい感じで自動で折り返す
class
flex
折り返しなし
class
flex
逆に表示していく
class
flex
縦方向
class
flex
逆に表示していく
class
flex
横方向
class
flex
逆に表示していく
class
flex
カラムやアイテム内でベースラインが一直線
class
flex
カラムやアイテム内で中央寄せ
class
flex
カラムやアイテム内で下寄せ
class
flex
カラムやアイテム内で上寄せ
class
flex
カラムやアイテム内でストレッチ(枠内いっぱい)
class
flex
マージン自動化(右寄せ)
class
flex
カラムの表示順を指定する
class
flex
p-2 
パディング !important
class
flex
幅の調整(自分を優先して残りを調整)
class
flex
幅の調整(他を優先して、自分を調整)
class
flex
class
clearfix
フロート解除(フロートが設定していないコンテンツが回り込まない)
class
accordion
アコーディオン
class
alert
alertの色、必ずalertとセットで使う
class
alert
alertの色、必ずalertとセットで使う
class
alert
alertの閉じるで、アラートが閉じる
class
button
ボタングループ、視覚支援(roleとセット)
class
button
ボタンを縦に並べる
class
button
ドロップ上方向
class
button
ボタンツールバー
class
button
class
card
カードはdivで作成する
class
card
カード内ヘッダー
class
card
カード内コンテンツ
class
card
カード内フッター
class
card
カードの背景色とマージンの設定
class
card
divで設定すると、div内のpタグに設定される
class
card
カードのボーダーの色とマージンの設定
class
card
カードのマージン
class
card
カードのパディング
class
card
パディング付きで右寄せ
class
card
テキスト中央寄せ
class
card
テキスト左寄せ
class
card
テキスト文字色、背景色
class
card
カードの幅を固定
class
card
複数のカードを並べる
class
card
複数のカードを並べる(隙間あり)
class
card
複数のカードを並べる(flex)
class
card
ボーだーの色を付ける
class
card
背景色を透明にする
class
card
画像とテキストを重ねて表示する
class
carousel
カーセルのコンテナ
class
carousel
カーセルで表示するアイテム
class
carousel
class
carousel
カーセル
class
carousel
class
carousel
キャプション
class
collapse
開閉させる
class
collapse
開閉させるコンテンツ
class
collapse
class
collapse
開く
class
color
bg-は背景色
class
color
背景色付けて、テキストは白抜きにする
class
color
class
container
コンテナ(掲載するパッケージ)
class
container
コンテナ背景色あり
class
container
mはマージン調整(mbは下、ボトム)
class
container
mはマージン調整(myは上下)
class
container
テキスト中央寄せ
class
container
上下左右真ん中
class
container
レスポンシブに関係なく、横幅が変動する
class
display
インラインflex
class
display
背景色と白抜き文字
class
display
lg以上なら表示しない
class
display
表示しない
class
display
印刷時に印字なし
class
dropdown
ドロップダウン
class
dropdown
ドロップダウンメニュ(コンテナ的な役割)
class
dropdown
区切り線
class
dropdown
ドロップダウン色
class
dropdown
class
float
フロート
class
form
formをrowで設定する(labelとinputが横並びになる)
class
form
position: relative;で.form-check-inputと使う
class
form
チャックボックスの横並び
class
form
チャックボックスのマージンの設定
class
form
フォーム、ファイルアップロード
class
form
バリデーションメッセージの表示
class
form
ツールチップのメッセージ
class
form
position: relative;
class
form
input-groupのマージンの設定
class
form
input-groupの大
class
form
input-groupの小
class
form
テキストを前後に追加
class
from
フィードバリデーションチェック
class
list-group
リストグループととしてデザイン化
class
modal
モーダル
class
modal
モーダルダイヤログ
class
modal
モーダルヘッダー
class
modal
モーダル本体
class
modal
モーダルコンテンツ
class
modal
モーダルフッター
class
modal
消えていく
class
modal
モーダル大
class
modal
モーダル小
class
nav
タブ形式で使用する
class
navbar
class
progress
プログレスバー(進捗バー)
class
progress
プログレスバーマージン
class
progress
プログレスバー本体
class
progress
進捗率100%
class
progress
進捗率25%
class
progress
背景色
class
progress
ストライプ背景色にる
class
progress
ストライプ背景色にする
class
progress
スタライプ背景色のアニメーションにする
class
shadow
ブロックの影
class
shadow
ブロック影なし
class
shadow
ブロックの影大きめ
class
shadow
ブロックの影小さめ
class
Sizing
class
Sizing
w幅サイズ
class
Sizing
幅固定で左右のマージンがauto
class
Sizing
幅固定で左右のマージンがauto,フロート解除
class
Sizing
h高さサイズ、インライン
class
Sizing
h高さサイズ、インライン
class
tab
パネルのコンテンツ
class
tab
パネルのコンテンツの初期表示
class
table
tableではなくdivで設定する
class
table
smの場合のtable
class
table
mdの場合のtable
class
table
lgの場合のtable
class
table
xlの場合のtable
class
text
テキストセンター
attribute
aria-
attribute
aria-
読み上げ支援に利用、画面には表示されない
attribute
aria-
複数のメニューが紐づけられている場合
attribute
aria-
プログレスバーの進捗率
attribute
JavaScript
タブインデックス
id
accordion
アコーディオン
id
carousel
カーセル
id
nav
nav 
divはnavは、サイドメニューやタグ表示
javascript
accordion
accordion
javascript
buttons
buttons
javascript
carousel
カーセルの秒数
javascript
carousel
carousel
javascript
collapse
idで連携するターゲットコンテンツを指定
role
alert
アラート
role
button
ツールバー
role
dialog
ダイヤログ
role
progress
ブログレスバー(進捗バー)
role
tab
タブパネル
class
Sizing
テーブルのサイズ
class
table
テーブルデフォルト
class
table
テーブルのボーダ
class
table
ボーダなし
class
table
テーブルの色
class
table
テーブルのフォバー
class
table
テーブルのフォバーの色
class
table
smサイズ
class
table
縞模様
class
text
改行しない
class
list-group
flexのcolumn形式にする
class
list-group
ボーダーの無いリストグループ
class
list-group
インライン表示
class
list-group
リストマーカなし
class
nav
nav 
flexでwrap指定、スタイルはnone→Flexboxコンテナになる
class
nav
カラムとして使う
class
nav
ulでピル型のナビ
class
nav
fillは枠いっぱい
class
nav
ピル型ナビゲーション
class
nav
ulでタブ型デザインのナビ
class
nav
タブ型ナビゲーション
class
nav
中央寄せナビ
class
nav
右寄せナビ
class
navbar
ulでナビバー
class
navbar
マージン右オート
class
navbar
マージン右オート
class
pagination
ulでページング
class
pagination
ページングのサイズが大
class
pagination
ページングのサイズが小
class
pagination
ページングを中央寄せ
class
pagination
ページングを右寄せ
role
tab
タブリスト
id
nav
タブ
class
carousel
カーセル
class
nav
パン屑
attribute
aria-
カレントページ
class
list-group
サイドメニュー的に利用する
class
list-group
リストアクティブ
class
list-group
バッチ付きリスト
class
list-group
リスト非活性
class
list-group
リストメニューの色
class
media
メディアオブジェクトとして利用
class
nav
パン屑アイテム
class
nav
パン屑アイテムアクティブ
class
nav
ナビアイテム
class
nav
ナビアイテムアクティブ
class
nav
ナビドロップダウン
class
nav-item
アクティブ状態(選択されていることがわかるようにする)
class
pagination
ページングのアイテム
class
pagination
ページングアクティブ
class
pagination
ページング非活性
javascript
carousel
カーセルのインジケータ
javascript
carousel
idで連携するターゲットコンテンツを指定
class
row
row 
dlでrowとcolを使う
class
col
カラムサイズ
class
col
長い文書の省略
attribute
aria-
外部コンテンツ、動画などの表示
class
display
class
alert
アラート内で使う
class
border
mはマージン調整(マージンボトム)
class
card
カード内で使う
class
card
class
display
h1のサイズで表示
class
dropdown
文字見出し
class
modal
モーダル内で使う
class
text
yはトップとボトムの両方 センタリング
class
text
センタリング
class
text
class
text
テキストが白抜き
class
text
イタリック
class
text
太字
class
text
細字
class
text
class
Text
h1 h2 h3 h4 h5 h6 
hの文字の大きさを指定する
class
Text
リード文として使う
class
text
センター(1行前提)
class
text
テキスト中央とマージン
class
text
等間隔
class
text
右寄せ(1行分とっていることが前提)
class
text
左寄せ(1行分とっていることが前提)
class
text
最初の1文字だけ大文字
class
text
小文字に
class
text
大文字に
class
text
font-family 等幅フォント
class
text
長いテキストの省略
class
border
マージンボトム0
class
card
カード内で使う
attribute
aria-
インラインとしてグループ化する、デザインするためのもの
class
badge
バッチは未読数を出すためのアイコン的なもの
class
badge
ピル型バッチと色
class
border
枠線を付ける
class
border
枠線を表示しない
class
border
border上線
class
border
border下線
class
border
border左線
class
border
border右線
class
border
上枠線の太さ0
class
border
下枠線の太さ0
class
border
左枠線の太さ0
class
border
右枠線の太さ0
class
carousel
アイコンを表示する
class
carousel
アイコンを表示する
class
color
bg-はバックグランドの背景色
class
display
ブロック表示にする背景とテキストの色
class
display
ブロック表示にする背景とテキストの色
class
dropdown
リンクなしのドロップダウンのアイテム
class
float
インラインのフロート左
class
float
インラインのフロート右
class
float
フロートしない(重ならない)
class
float
mdなら左寄せ
class
float
smなら左寄せ
class
float
lgなら左寄せ
class
float
xmなら左寄せ
class
form-group
inputの前後にコンテンツを追加する場合に利用
class
from
視覚支援(読み上げ)
class
navbar
ナビバーブランド、ロゴ、サイト名など(aタグで使う)
class
navbar
ナビバーにテキストを表示する
class
navbar
レスポンシブ時のトグルアイコン
class
rounded
角丸にする(背景色で角丸にする)
class
rounded
角丸の角度
class
rounded
サイクル角丸
class
rounded
トップのみ
class
rounded
ボトムのみ
class
rounded
左のみ
class
rounded
右のみ
class
Text
小さい文字
class
Text
マーカー文字
class
form
smallタグより、CSSでsmallと同じことをする
class
text
テキストの色
class
blockquote
引用文の表示
class
blockquote
マージンボトムなし
class
blockquote
テキスト中央寄せ
class
blockquote
テキスト左寄せ
attribute
text
略語の正式名称
class
text
略語の表示、大文字に
id
nav
idはjs等で利用する場合は多い
class
alert
アラート用の太い文字のリンク
class
badge
バッチと色
class
button
背景色付きでボタン型になる
class
button
大きなボタン
class
button
ボタンアクティブ
class
button
ボタン非活性
class
button
トグルボタン
class
button
ボタンの色
class
button
ドロップボタン
class
card
カード内の少し文字が大きいリンク
class
carousel
カーセルの前へ
class
carousel
カーセルの次へ
class
color
背景色付きでブロック型になる
class
dropdown
ドロップダウンで使用する
class
dropdown
ドロップダウンアクティブ
class
dropdown
ドロップダウン非活性
class
flex
タブ形式で使用する
class
flex
タブアクティブ
class
flex
タブ非活性
class
from
視覚支援読み上げ
class
list-group
リスト型でアクティブ状態の色が変わる
class
list-group
リストアクティブ
class
list-group
リスト非活性
class
list-group
リンクをリスト型にして、色を指定している
class
nav
ナビバー時のリンク
class
nav
ナビバー時のリンクアクティブ
class
nav
ナビバー時のリンク非活性
class
nav
liとaを併用して利用する
class
nav
ナビバーリンクアクティブ
class
nav
ナビバーリンク非活性
class
nav
ナビバードロップダウンメニュー
class
navbar
ナビバー
class
pagination
ページネーションのリンク
class
text
テキストの文字色(薄い黒)
class
text
テキストの背景色と白抜き文字
class
text
rgbaカラー 透明度0.5 !important;
attribute
aria-
読み上げ支援に利用、画面には表示されない
attribute
aria-
disabled(非活性)状態であることを示す
attribute
aria-
要素の開閉の状態を示す
attribute
aria-
ポップアップメニューが存在するかどうかを示す
attribute
aria-
入力項目のラベル
attribute
aria-
アクティブな状態では active クラスと aria-pressed="true" で示す
attribute
aria-
選択されているもの
attribute
form
役割名
attribute
JavaScript
タブ
javascript
carousel
ページング
javascript
collapse
collapse
javascript
dropdown
dropdown
javascript
tab
tab
class
card
カード内で画像を使う
class
card
カード内で画像を上部に表示
class
card
カード内で画像を下部に表示
class
display
witdh100%
class
display
インラインブロックでTOP配置
class
figure
高さautoでマージン設定
class
flex
メディア内で使う、位置とマージン
class
flex
表示順
class
float
左フロート
class
float
右フロート
class
img
枠いっぱい
class
img
サムネイル
class
img
中央寄せ
class
Sizing
画像の高さ
class
Sizing
画像の幅
class
figure
図表の囲み
class
figure
図表キャプション
class
figure
キャプション中央寄せ
class
figure
キャプション左寄せ
class
figure
キャプション右寄せ
attribute
form
バリデーションなし
class
form
フォームインライン
class
form
マージン
class
form
バリデーション
id
button
トグルボタン
class
button
ボタン色
class
button
ボタンデザインと色
class
button
ボタンactive状態
class
button
ボタン大きさ
class
button
ボタン大きさ
class
button
ボタン大きさ
class
button
ボタンマージン
class
button
ボタンマージン(topとbottom)
class
button
リンク
class
button
アコーディオンボタン
class
button
ドロップダウンボタン
class
button
アウトラインボタン(白抜き)
class
button
アウトラインボタンマージン
class
button
ボタン大
class
button
ボタン小
class
dropdown
ドロップリスト
class
list-group
幅を100%にしててテキストの位置は継承する
class
modal
閉じるボタン
class
navbar
ナビバーのトグルボタン(画面によりdisplay:none)
attribute
aria-
idと連動(nav)
attribute
aria-
Close
attribute
aria-
視覚支援(trueなら、おされている、falseならおされていない)
attribute
aria-
視覚支援(開閉状態、OFF,ON)
attribute
aria-
視覚支援、ポップアップTRUE
attribute
checkbox
オートコンプリート機能off
attribute
form
非表示
javascript
alert
alert
javascript
carousel
idで連携するターゲットコンテンツを指定
javascript
dropdown
データの表示場所の指定
javascript
dropdown
開閉を切り替える(button,collapse,dropdown,modal)
javascript
dropdown-menu
scrollParent
javascript
dropdown-menu
ドロップダウンを反転させるTRUE
javascript
modal
jsで利用(alertやを閉じるときに使われる)
class
form
フォームグループ
class
button
labelにボタン
class
button
ボタン、アクティブ状態
class
col
labelにcolにする
class
col
labelにcol大
class
col
labelにcol小
class
form
チェックボックス
class
form-group
beforeを設定する
class
form-group
ファイル選択
class
form-group
inputの前後につける文字
class
from
視覚支援(読み上げ)
for
form
labelとinput連動さるためにはidを使う
attribute
aria-
アクセシビリティ、検索
attribute
aria-
フォーカスを当てると、aria=label後に「説明」を読み上げる
attribute
form
デフォルト値
attribute
form
入力不可
attribute
form
入力例を表示する
attribute
form
リードオンリー
attribute
form
必須項目
attribute
from
max 
最大文字数
attribute
from
min 
最小文字数
attribute
from
カウントアップ
attribute
from
未選択
class
button
ボタンの標準形
class
form
ブロックにして枠を整える
class
form
入力欄を大きく表示
class
form
入力欄を小さく表示
class
form
「is-invalid」で枠を赤色
class
form
「is-valid」で枠を緑色
class
form
入力欄のマージンの設定
class
form
入力にファイルを指定
class
form
枠なしで値を表示する
class
form
チェックボックス
class
form
レンジ入力
class
form-group
チェックボックス
class
form-group
チェックボックス
class
form-group
ファイル選択
class
form-group
カスタムレンジ入力
type
button
ボタン要素
type
form
チェックボックス要素
type
form
パスワード要素
type
form
ラジオボタン要素
type
form
範囲要素
type
form
リセット
type
form
検索、×でキーワードのクリアができる
type
form
サブミット実行
type
from
メール要素
type
from
ファイル要素
type
text
テキスト要素
attribute
aria-
テキストエリア用
attribute
from
テキストエリアの表示行数
class
form
テキストエリア
class
form
入力エリアはform-control
class
form
大きく表示
class
form
小さく表示
class
form-group
選択肢
class
form-group
選択肢大
class
form-group
選択肢小
attribute
form
複数ファイル対応