@ (min-width: 576px) {具体的にはcontainer のサイズを限定的にする 576px以上
@media (min-width: 768px) {
@media (min-width: 992px) {
@media (min-width: 1200px) {
@media (max-width: 575.98px) {maxは576px以下に適用される(小数点.98)
@media (max-width: 767.98px) {
@media (max-width: 991.98px) {
@media (max-width: 1199.98px) {
@media (prefers-reduced-motion: reduce) {ユーザがデバイス上でアニメーションを制御を設定している場合に反応する
classcontainercontainer
classcontainer bg-light
classcontainer mb-5mはマージン調整(mbは下、ボトム)
classcontainer my-5mはマージン調整(myは上下)
classcontainer py-4pはパディング
classcontainer text-center
classcontainer-fluid
classcontainer py-5 d-flex justify-content-center
classrow罫線的なもの
classrow align-items-center
classrow align-items-end
classrow align-items-start
classrow justify-content-around
classrow justify-content-between
classrow justify-content-center
classrow justify-content-end
classrow justify-content-start
classrow no-gutters
classcol縦線みたいなもの、1行を12分割するで構成されている
classcol-22/12→1/6
classcol-4
classcol-6
classcol-8
classcol-6 col-md-4
classcol-4 col-sm-6
classcol-6 mb-5
classcol-8 col-sm-6
classcol-9
classcol-smcol-smを使うと、768px以上の画面サイズに適用される
classcol-sm-2smはタブレットを想定
classcol-sm-3xsはスマホ
classcol-sm-4
classcol-sm-5 col-md-6
classcol-sm-5 offset-sm-2 col-md-6 offset-md-0
classcol-sm-6
classcol-sm-6 mb-4
classcol-sm-8
classcol-sm-9
classcol-sm-10
classcol align-self-center
classcol align-self-end
classcol align-self-start
classcol order-1
classcol order-12
classcol order-first
classcol-12 col-md-8
classcol-auto
classcollapse
classcollapse contents
classcollapse navbar-collapse
classcollapse show
classcol-md-2 ml-autocol-smを使うと、992px以上の画面サイズに適用される
classcol-md-3 mb-3mdはノートPCを想定
classcol-md-3 ml-auto
classcol-md-3 ml-md-auto
classcol-md-4
classcol-md-4 ml-auto
classcol-md-4 offset-md-4
classcol-md-6 mb-3
classcol-md-auto
classcol-lg-6lgは大画面PC
classbox
classcard表形式とカード形式が合体
classcard bg-light mb-3
classcard bg-secondary text-white text-center p-3
classcard border-primary mb-3
classcard card-body
classcard mb-3
classcard p-3
classcard p-3 text-right
classcard text-center
classcard text-right
classcard text-white bg-danger mb-3テキスト文字色、背景色
classcard text-white bg-dark mb-3
classcard text-white bg-info mb-3
classcard text-white bg-primary mb-3
classcard text-white bg-secondary mb-3
classcard text-white bg-success mb-3
classcard text-white bg-warning mb-3
classcard w-75
classcard-body
classcard-columns
classcard-deck
classcard-footer
classcard-footer bg-transparent
classcard-group
classcard-header
classcard-header bg-transparent
classcard-header border-primary
classcard-img-overlay
classclearfix
classd-flexcssのflexboxを使いfloatから解放される
classd-flex align-content-around flex-wrap
classd-flex align-content-between flex-wrap
classd-flex align-content-center flex-wrap
classd-flex align-content-end flex-wrap
classd-flex align-content-start flex-wrap
classd-flex align-content-stretch flex-wrap
classd-flex align-items-baseline
classd-flex align-items-center
classd-flex align-items-end
classd-flex align-items-start
classd-flex align-items-stretch
classd-flex flex-column
classd-flex flex-column-reverse
classd-flex flex-nowrap
classd-flex flex-row
classd-flex flex-row-reverse
classd-flex flex-wrap
classd-flex flex-wrap-reverse
classd-flex justify-content-around
classd-flex justify-content-between
classd-flex justify-content-center
classd-flex justify-content-end
classd-flex justify-content-start
classd-flex w-100 justify-content-between
classd-inline-flexd-inline-flex
classd-inline bg-dark text-white
classd-inline bg-primary text-white
classd-lg-none bg-primary text-white
classd-none d-lg-block bg-secondary text-white
classd-none d-print-block
classd-print-none
classw-100 d-none d-md-blockwサイズ
classw-25
classw-50
classw-50 mx-auto bg-danger
classw-50 mx-auto bg-danger clearfix
classw-75
classw-100
classh-100 d-inline-blockhサイズ
classh-25 d-inline-block
classh-50 d-inline-block
classh-75 d-inline-block
classalign-self-baseline
classalign-self-center
classalign-self-end
classalign-self-start
classalign-self-stretch
classaccordion
classbg-dark p-4bg-
classbg-dark text-white
classbg-info text-center
classbg-primary text-white
classbtn-groupbtn-
classbtn-group btn-group-lg
classbtn-group btn-group-sm
classbtn-group dropleft
classbtn-group dropright
classbtn-group dropup
classbtn-group mr-2
classbtn-group-vertical
classbtn-toolbar
classbtn-toolbar mb-3
classdefault-file mb-5
classdropdowndropdown
classdropdown-divider
classdropdown-menu
classdropdown-menu dropdown-menu-right
classdropdown-menu p-3 text-muted
classcustom-file
classcontrol-buttons my-3
classcustom-control custom-checkbox
classcustom-control custom-checkbox mb-3
classcustom-control custom-radio
classembed-responsive embed-responsive-16by9
classfixed-bottom py-3 px-3 bg-dark text-center
classfixed-top py-3 px-3 bg-dark text-center
classflex-fill
classfloat-right bg-success
classform-group
classform-group col-md-2
classform-group col-md-4
classform-group col-md-6
classform-group mb-5
classform-group row
classform-row
classform-row align-items-center
classform-check
classform-check form-check-inline
classform-check mb-2
classform-check mb-2 mr-sm-2
classinput-groupinput-group
classinput-group input-group-lg
classinput-group input-group-sm mb-3
classinput-group mb-2
classinput-group mb-2 mr-sm-2
classinput-group mb-3
classinput-group-append
classinput-group-prepend
classinput-group-text
classinvalid-feedback
classinvalid-tooltip
classjumbotronjumbotron
classjumbotron jumbotron-fluid
classlist-group
classmediamedia
classmedia mt-3
classmedia-body
classmedia-body order-1
classml-auto p-2
classcarousel slidecarousel
classcarousel slide carousel-fade
classcarousel-caption
classcarousel-caption d-none d-md-block
classcarousel-inner
classcarousel-item
classcarousel-item active
classmodalmodal
classmodal fade
classmodal-body
classmodal-content
classmodal-dialog
classmodal-dialog modal-dialog-centered
classmodal-dialog modal-lg
classmodal-dialog modal-sm
classmodal-footer
classmodal-header
classmr-auto
classnavbar-nav
classorder-1カラムの入れ替え
classorder-2
classorder-3
classp-2パディング !important
classp-2 flex-grow-1
classp-2 flex-shrink-1
classp-2 w-100
classprogressprogress
classprogress mb-3
classprogress mb-5
classprogress-bar
classprogress-bar bg-danger
classprogress-bar bg-info
classprogress-bar bg-success
classprogress-bar bg-warning
classprogress-bar progress-bar-striped
classprogress-bar progress-bar-striped bg-danger
classprogress-bar progress-bar-striped bg-info
classprogress-bar progress-bar-striped bg-success
classprogress-bar progress-bar-striped bg-warning
classprogress-bar progress-bar-striped progress-bar-animated
classprogress-bar progress-bar-striped progress-bar-animated bg-danger
classprogress-bar progress-bar-striped progress-bar-animated bg-info
classprogress-bar progress-bar-striped progress-bar-animated bg-success
classprogress-bar w-100
classprogress-bar w-25
classprogress-bar w-50
classscrollspy-example border px-1
classshadow p-3 mb-5 bg-light rounded
classshadow-lg p-3 mb-5 bg-light rounded
classshadow-none p-3 mb-5 bg-light rounded
classshadow-sm p-3 mb-5 bg-light rounded
classsticky-top py-3 px-3 bg-dark text-center
classtable-responsivetable
classtable-responsive-lg mb-5
classtable-responsive-md mb-5
classtable-responsive-sm mb-5
classtable-responsive-xl mb-5
classtab-content mt-3tab
classtab-pane fade
classtab-pane fade show active
classtext-center
classvalid-feedback
classvalid-tooltip
classalert alert-dangeralert
classalert alert-dark
classalert alert-info
classalert alert-light
classalert alert-primary
classalert alert-secondary
classalert alert-success
classalert alert-warning
classalert alert-warning alert-dismissible fade show
idaccordionアコーディオン
idcarouselカーセル
idcollapseOne
idcontact
idexampleModalモーダル
idheadingOne
idhome
idlist-example
idmyTabContent
idnav
idnavbarNav
idprofile
idsample
idtarget_div
aria-hiddenTRUE
aria-label文字列読み上げ支援に利用、画面には表示されない
aria-labelledbyラベル複数のメニューが紐づけられている場合
aria-valuemax数字プログレスバーの進捗率
data-interval1000data
data-offset0
data-parent#accordion
data-parent#sample
data-ridecarouselcarousel
data-spyscrollscroll
data-target#list-example
data-togglebuttons
rolealertアラート
roledialogダイヤログ
roledocument
rolegroup
roleprogressbar
roleseparator
roletabpanel
roletoolbarツールバー
tabindex-1
classh4 text-center mb-5見出し、タイトル
classh5
classmb-2mはマージン調整(マージンボトム)
classmb-3
classmb-4
classmt-5マージントップ
classmy-5 text-center
classtext-center
classtext-center mb-3
classtext-center mb-4
classtext-center mb-5
classtext-center my-3
classtext-center my-4
classtext-center my-5
classtext-monospace
idinfo
classdemo
classdisplay-1
classdisplay-2
classdisplay-3
classdisplay-4
classalert-heading
classcard-header
classcard-title
classdisplay-3
classtext-white
classmodal-title
classdropdown-header
aria-hiddenTRUEインラインとしてグループ化する、デザインするためのもの
classbadge badge-dangerバッチは未読数を出すためのアイコン的なもの
classbadge badge-dark背景の色がいくつか用意されている
classbadge badge-info
classbadge badge-light
classbadge badge-primary
classbadge badge-primary badge-pill
classbadge badge-secondary
classbadge badge-success
classbadge badge-warning
classbadge badge-pill badge-danger
classbadge badge-pill badge-dark
classbadge badge-pill badge-info
classbadge badge-pill badge-light
classbadge badge-pill badge-primary
classbadge badge-pill badge-secondary
classbadge badge-pill badge-success
classbadge badge-pill badge-warning
classbg-dark text-whitebg-はバックグランドの背景色
classbg-primary text-white
classborder枠線を付ける
classborder border-0枠線を表示しない
classborder border-bottom-0
classborder border-left-0
classborder border-right-0
classborder border-danger枠線に色を付ける
classborder border-dark
classborder border-info
classborder border-light
classborder border-primary
classborder border-secondary
classborder border-success
classborder border-top-0
classborder border-warning
classborder border-white
classborder-topborderのカスタイマイズ
classborder-bottom
classborder-left
classborder-right
classcarousel-control-next-icon
classcarousel-control-prev-icon
classd-block bg-dark text-white
classd-block bg-primary text-white
classdropdown-item-text
classfloat-leftfloat
classfloat-right
classfloat-none
classfloat-lg-right
classfloat-md-right
classfloat-sm-right
classfloat-xl-right
classnavbar-brand
classnavbar-text ml-auto
classnavbar-toggler-icon
classsmall
classsr-only
classtext-muted
classpage-link
classinput-group-text
classmark
classrounded角丸
classrounded-0
classrounded-circle
classrounded-top
classrounded-bottom
classrounded-left
classrounded-right
idbasic-addon1aria-describedbyとセット、アドオン
idcircle
idinputGroup-sizing-default
idinputGroup-sizing-lg
idinputGroup-sizing-sm
classform-text text-mutedsmallタグより、CSSでsmallと同じことをする
classtext-muted
idemailHelp
idpasswordHelpBlock
classalert-link
classbadge badge-success
classbg-danger text-white d-block py-2背景色付きでブロック型になる
classbg-dark text-white d-block py-2
classbg-info text-white d-block py-2
classbg-light text-dark d-block py-2
classbg-primary text-white d-block py-2
classbg-secondary text-white d-block py-2
classbg-success text-white d-block py-2
classbg-transparent d-block py-2
classbg-warning text-dark d-block py-2
classbg-white text-dark d-block py-2
classbtn btn-primary背景色付きでボタン型になる
classbtn btn-primary btn-lg
classbtn btn-primary btn-lg active
classbtn btn-primary btn-lg disabled
classbtn btn-primary toggle-btn
classbtn btn-secondary
classbtn btn-secondary dropdown-toggle
classcard-link
classcarousel-control-next
classcarousel-control-prev
classdropdown-item
classdropdown-item active
classdropdown-item disabled
classflex-sm-fill text-sm-center nav-link
classflex-sm-fill text-sm-center nav-link active
classflex-sm-fill text-sm-center nav-link disabled
classlist-group-item list-group-item-action
classlist-group-item list-group-item-action activeリスト型でアクティブ状態の色が変わる
classlist-group-item list-group-item-action disabled
classlist-group-item list-group-item-action flex-column align-items-start
classlist-group-item list-group-item-action flex-column align-items-start active
classlist-group-item list-group-item-action list-group-item-danger
classlist-group-item list-group-item-action list-group-item-danger active
classlist-group-item list-group-item-action list-group-item-dark
classlist-group-item list-group-item-action list-group-item-dark active
classlist-group-item list-group-item-action list-group-item-info
classlist-group-item list-group-item-action list-group-item-info active
classlist-group-item list-group-item-action list-group-item-light
classlist-group-item list-group-item-action list-group-item-light active
classlist-group-item list-group-item-action list-group-item-primary
classlist-group-item list-group-item-action list-group-item-primary active
classlist-group-item list-group-item-action list-group-item-secondary
classlist-group-item list-group-item-action list-group-item-secondary active
classlist-group-item list-group-item-action list-group-item-success
classlist-group-item list-group-item-action list-group-item-success active
classlist-group-item list-group-item-action list-group-item-warning
classlist-group-item list-group-item-action list-group-item-warning active
classnavbar-brand
classnav-item nav-link
classnav-item nav-link active
classnav-item nav-link disabled
classnav-link
classnav-link active
classnav-link disabled
classnav-link dropdown-toggle
classpage-link
classsr-only sr-only-focusable
classtext-black-50
classtext-body
classtext-danger
classtext-dark
classtext-info
classtext-light
classtext-light bg-dark
classtext-muted
classtext-primary
classtext-secondary
classtext-success
classtext-warning
classtext-white bg-dark
classtext-white-50 bg-dark
aria-controls文字列読み上げ支援に利用、画面には表示されない
aria-disabledTRUE
aria-expandedFALSE
aria-haspopupTRUE
aria-label次へ
aria-pressedTRUE
aria-selectedFALSE
aria-selectedTRUE
data-slidenext
data-slideprev
data-togglecollapse
data-toggledropdown
data-toggletab
href#carouselControlsページ内リンク
idcontact-tabidはjs等で利用する場合は多い
rolebutton
roletab
tabindex-1
classrow