Bootstrap 5

• Utility - Margin & Padding
• 1-1 media-queries
• 1-2 index
• 1-4 starter-cdn
• 1-7 icons-img
• 1-8 icons-embed
• 1-9 icons-sprite
• 1-10 icons-font
• 1-13 icons-css

2. Bootstrapのレイアウト

• 2-4 gridsystem-basic
• 2-5 equal-width
• 2-6 setting-column
• 2-7 setting-one-column
• 2-8 column-wrapping
• 2-9 row-cols
• 2-10 row-cols-width
• 2-11 row-cols-auto
• 2-12 stacked-horizontal
• 2-13 col-auto
• 2-14 equal-width2
• 2-15 multi-row
• 2-16 mix-and-match
• 2-17 row-cols-responsive

カラム整列

• 2-18 vertical-alignment
• 2-19 col-align-self
• 2-20 justify-content
• 2-21 setting-gutters

並べ替え・オフセット

• 2-22 order-1
• 2-23 order-first
• 2-24 offset
• 2-25 offset-reset
• 2-26 offset-spacing
• 2-27 grid-nesting

3. 基本的なスタイリング

• 3-1 typography-heading
• 3-3 typography-heading-class
• 3-4 typography-text-muted
• 3-5 typography-display
• 3-7 typography-lead
• 3-9 typography-small
• 3-11 typography-strong
• 3-13 typography-mark
• 3-15 typography-del
• 3-16 typography-s
• 3-17 typography-ins
• 3-18 typography-u
• 3-19 typography-em
• 3-20 typography-abbr
• 3-23 typography-blockquote
• 3-26 typography-blockquote-footer
• 3-28 typography-blockquote-center
• 3-29 typography-blockquote-end
• 3-30 typography-list-unstyled
• 3-32 typography-list-inline
• 3-34 typography-dl
• 3-36 code-inline
• 3-38 code-pre
• 3-40 code-var
• 3-41 code-kbd
• 3-43 code-samp

画像

• 3-47 img-fluid
• 3-49 img-thumbnail
• 3-51 img-float
• 3-52 img-text
• 3-53 img-spacing

テーブル

• 3-55 table-basic
• 3-58 table-dark
• 3-60 table-head-option
• 3-62 table-striped
• 3-64 table-bordered
• 3-66 table-borderless
• 3-68 table-hover
• 3-70 table-sm
• 3-72 table-bg-tr
• 3-73 table-bg-td
• 3-74 table-active
• 3-75 table-caption
• 3-77 table-responsive
• 3-79 table-responsive-breakpoint

図表

• 3-81 figure-basic
• 3-83 figure-aligning

4. 基本的なコンポーネント

アラート・バッジ・プログレス

• 4-1 alerts-basic
• 4-2 alerts-link-color
• 4-3 alerts-content
• 4-4 alerts-icons
• 4-5 alerts-close
• 4-6 badge-basic
• 4-7 badge-counter
• 4-8 badge-visually-hidden
• 4-9 pill-badges
• 4-10 badge-position
• badge-links
• 4-11 progress-basic
• 4-12 progress-label
• 4-13 progress-height
• 4-14 progress-background
• 4-15 progress-multiple-bars
• 4-16 progress-stripe
• 4-17 progress-animation

カード

• 4-18 card-basic
• 4-19 card-image
• 4-20 card-list-group
• 4-21 card-kitchen-sink
• 4-22 card-header-footer
• 4-23 card-header-h
• 4-24 card-background-color
• 4-25 card-border
• 4-26 card-bg-transparent
• 4-27 card-grid
• 4-28 card-sizing
• 4-29 card-text-align
• 4-30 card-nav-tabs
• 4-31 card-nav-pills
• 4-32 card-img-overlay
• 4-33 card-horizontal
• 4-34 card-card-group
• card-row-cols-h100
• card-row-cols

スピナー・プレースホルダー

• 4-35 spinner-basic
• 4-36 spinner-grow
• 4-37 spinner-sizing
• 4-38 spinner-align
• 4-39 placeholders-basic
• 4-40 placeholders-width-color
• 4-41 placeholders-sizing
• 4-42 placeholders-animation

5. ナビゲーション

• 5-1 navs-basic-ul
• 5-2 navs-basic-nav
• 5-3 navs-horizontal-alignment
• 5-4 navs-vertical-ul
• 5-5 navs-vertical-nav
• 5-6 navs-tabs
• 5-7 navs-pills
• 5-8 navs-fill
• 5-9 navs-fill-nav
• 5-10 navs-justified
• 5-11 navs-flex
• 5-13 navs-tabs-dropdown
• 5-14 navs-pills-dropdown
• 5-15 navs-js-data
• 5-16 navs-js
• 5-20 navbar-basic
• 5-21 navbar-brand
• 5-22 navbar-nav-ul
• 5-23 navbar-nav-div
• 5-24 navbar-nav-dropdown
• 5-25 navbar-form
• 5-26 navbar-input-group
• 5-27 navbar-button
• 5-28 navbar-text
• 5-29 navbar-color
• 5-30 navbar-container
• 5-31 navbar-container2
• 5-32 navbar-default
• 5-33 navbar-fixed-top-pt50
• 5-35 navbar-fixed-bottom
• 5-36 navbar-sticky-top
• 5-37 navbar-expand
• 5-38 navbar-brand-hidden
• 5-39 navbar-toggler-brand
• 5-40 navbar-external
• 5-41 navbar-offcanvas
• 5-42 navbar-offcanvas-responsive

パンくずリスト

• 5-43 breadcrumb-basic
• 5-44 breadcrumb-divider
• 5-45 breadcrumb-divider-svg

リストグループ

• 5-46 listgroup-basic
• 5-47 listgroup-active
• 5-48 listgroup-disabled
• 5-49 listgroup-links
• 5-50 listgroup-buttons
• 5-51 listgroup-background
• 5-52 listgroup-background-action
• 5-53 listgroup-background-action-active
• 5-54 listgroup-badges
• 5-55 listgroup-custom-content
• 5-56 listgroup-flush
• 5-57 listgroup-numbered

ページネーション

• 5-58 pagination-basic
• 5-59 pagination-icon
• 5-60 pagination-disable-active-span
• 5-61 pagination-disable-active
• 5-63 pagination-sizing
• 5-64 pagination-align

6. フォームとボタンのコンポーネント

• 6-1 form-basic
• 6-2 form-auto-sizing
• 6-3 form-readonly
• 6-4 form-check-stacked
• 6-7 form-check-switch
• 6-8 form-check-inline
• 6-9 form-check-without-label
• 6-10 form-select
• 6-11 form-select-sizing
• 6-12 form-select-attr
• 6-13 form-range
• 6-14 form-grid
• 6-15 form-row
• 6-16 form-horizontal-form
• 6-17 form-label-sizing
• 6-18 form-control-sizing
• 6-19 form-text
• 6-20 form-floating-label
• 6-21 form-floating-label-misc
• 6-22 form-floating-label-grid
• 6-23 form-disabled-fieldset
• 6-24 form-validation-default
• 6-25 form-validation-custom
• 6-26 form-validation-tooltip
• 6-27 form-validation-server-side

入力グループ

• 6-28 input-group-basic-addon1
• 6-29 input-group-basic-addon2
• 6-30 input-group-basic-addon3
• 6-31 input-group-basic-addon4
• 6-32 input-group-basic-addon5
• 6-33 input-group-sizing
• 6-34 input-group-checkbox-radio
• 6-35 input-group-multiple-inputs
• 6-36 input-group-multiple
• 6-37 input-group-button
• 6-38 input-group-dropdown
• 6-39 input-group-segmented-buttons
• input-group-basic-addons
• input-group-custom-select

ボタン

• 6-40 button-basic
• 6-41 button-tags
• 6-42 button-outline-buttons
• 6-44 button-sizes
• 6-45 button-btn-block
• 6-46 button-active-state
• 6-47 button-disabled-state
• 6-48 button-disabled-anchor
• 6-49 button-toggle
• 6-50 button-checkbox
• 6-51 button-radio
• 6-52 button-method
• 6-53 btn-group-basic
• 6-54 btn-group-checkradio
• 6-55 btn-group-btn-toolbar
• 6-56 btn-group-mix-groups
• 6-57 btn-group-sizing
• 6-58 btn-group-nesting
• 6-59 btn-group-vertical

ドロップダウン

• 6-60 dropdown-basic-button
• 6-61 dropdown-basic-link
• 6-62 dropdown-btn-group
• 6-63 dropdown-toggle-split
• 6-64 dropdown-dark
• 6-65 dropdown-dropup
• 6-67 dropdown-alignment
• 6-68 dropdown-includes
• 6-69 dropdown-text
• 6-70 dropdown-disabled-active
• 6-71 dropdown-no-link
• 6-72 dropdown-option-offset
• 6-73 dropdown-option-offset-js
• 6-74 dropdown-option-boundary
• 6-75 dropdown-option-autoclose
• 6-76 dropdown-method
• 6-77 dropdown-event
• button-compare
• form-basic-origin
• form-inline
• dropdown-dropend
• dropdown-dropstart
• dropdown-items-button

7. JavaScript

カルーセル

• 7-3 carousel-basic
• 7-4 carousel-controls
• 7-5 carousel-indicators
• 7-6 carousel-captions
• 7-7 carousel-crossfade
• 7-9 carousel-interval
• 7-10 carousel-interval-individual
• 7-11 carousel-dark
• 7-12 carousel-js
• 7-13 carousel-options-data
• 7-14 carousel-options-js
• 7-15 carousel-methods
• 7-16 carousel-events

折りたたみ

• 7-17 collapse-basic
• 7-18 collapse-horizontal
• 7-19 collapse-multiple
• 7-20 collapse-accordion
• 7-21 collapse-accordion-alwaysopen
• 7-22 collapse-js
• 7-23 collapse-js-parent
• 7-24 collapse-method
• 7-25 collapse-event

モーダルウィンドウ

• 7-26 modal-basic
• 7-27 modal-animation
• 7-28 modal-backdrop-static
• Fig 7-23 modal-long
• 7-29 modal-dialog-centered
• 7-30 modal-grid
• 7-31 modal-sizing
• 7-32 modal-fullscreen
• 7-33 modal-switch
• 7-34 modal-method
• 7-35 modal-event

オフキャンバス

• 7-36 offcanvas-basic
• 7-37 offcanvas-placement
• 7-38 offcanvas-backdrop
• 7-39 offcanvas-method
• 7-40 offcanvas-event

ポップオーバー

• 7-41 popovers-basic
• 7-42 popovers-placement
• 7-44 popovers-disabled

スクロールスパイ

• 7-45 scrollspy-basic
• 7-46/47 scrollspy-listgroup
• 7-49 scrollspy-event

トースト

• 7-50 toast-basic
• 7-51 toast-stack
• 7-52 toast-content
• 7-53 toast-color

ツールチップ

• 7-54 tooltips-basic
• 7-56 tooltips-html
• 7-57 tooltips-disabled

8. ユーティリティとヘルパー

色

• 8-1 colors
• 8-5 bg-color
• 8-6 bg-gradient
• 8-10 colored-links

ボーダー

• 8-11 border
• 8-12 border-0
• 8-13 border-color
• 8-14 border-width
• 8-15 rounded

Display

• 8-16 display
• 8-17 d-none
• 8-18 d-print

Sizing

• 8-19 sizing-w
• 8-20 sizing-h
• 8-21 sizing-mw
• 8-22 sizing-mh
• 8-23 mx-auto
• 8-24 gap

Flex

• 8-25 d-flex
• 8-26 flex-direction
• 8-27 justify-content
• 8-28 align-items
• 8-29 align-self
• 8-30 flex-fill
• 8-31 flex-grow-shrink
• 8-32 flex-wrap
• 8-33 flex-order
• 8-34 me-auto
• 8-35 align-content
• 8-36 flex-media-object

Float

• 8-37 float
• 8-38 float-responsive
• 8-39 clearfix-before
• 8-40 clearfix-after

Position

• 8-44 arrange-elements
• 8-45 center-elements
• 8-48 fixed-top
• 8-49 fixed-top2
• 8-50 fixed-bottom
• 8-51 fixed-bottom2
• 8-52 sticky-top

Text

• 8-53 text-align
• 8-54 text-nowrap
• 8-55 text-truncate
• 8-56 text-transform
• 8-57 text-font-size
• 8-58 text-font
• 8-59 text-line-height
• 8-60 font-monospace

Vertical alignment

• 8-61 vertical-align-inline
• 8-62 vertical-align-table

Other Utilities and Helpers

• 8-63 visually-hidden
• 8-64 visibility
• 8-65 ratio
• 8-66 shadow
• 8-67 interactions-user-select
• 8-68 interactions-pointer-event
• 8-69 overflow
• 8-70 stretched-link
• 8-71 stack-vertical
• 8-72 stack-horizontal
• 8-73 opacity

9. Mock-up Sample

• 9-1 replace
• 9-2 structure
• 9-3 header
• 9-4 mockup-navbar-base
• 9-5 mockup-navbar-subcompornent
• 9-6 mockup-navbar-navmenu
• 9-7 mockup-navbar-navitem-dropdown
• 9-8 mainvisual-base
• 9-9 mainvisual-indicator
• 9-10 mainvisual-slide
• 9-11 mainvisual-control
• 9-12 contents-01
• 9-13 contents-02-layout
• 9-14 contents-02-upper
• 9-15 contents-02-lower
• 9-16 contents-02-modal-window
• 9-17 contents-02-modal-button
• 9-18 contents-03-layout
• 9-19 contents-03-layout-tabpanel
• 9-20 contents-04
• 9-21 contents-05-layout
• 9-22 contents-05-left
• 9-23 contents-05-right
• 9-24 footer
• 9-25 mockup-link-navbar
• 9-26 mockup-link-about
• 9-27 mockup-link-footer
• 9-29 contact-base
• 9-30 contact-layout
• 9-31 contact-breadcrumb
• 9-32 contact
• index

10. Customize

• rounded
• gradient

Bootstrap Files

• bootstrap-5.0.2-dist.zip
• bootstrap-icons-1.10.3.zip