HTMLタグ別のbootstrap4のサンプル

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