- .border
- .border-top
- .border-end
- .border-bottom
- .border-start
- .m-0 - No Margin
- .mt-5 - Margin Top
- .mr-6 - Margin Right
- .m-5 - Large Margin
- p-0 - No padding
- pt-5 - Large padding top
- pr-5 - Large padding right
- d-inline - display inline
- d-block - display block
- d-flex - display flex
- d-none - display none
- d-none d-lg-block - Visible on large screens, hidden on smaller resolutions
- .shadow
- .shadow-none
- .shadow-sm
- .shadow-lg
- .lead - Makes a paragraph stand out
- .text-start - Indicates left-aligned text
- .text-break - Prevents long text from breaking layout
- .text-center - Indicates center-aligned text
- .text-decoration-none - Removes the underline from a link
- .text-end - Indicates right-aligned text
- .text-nowrap - Indicates no wrap text
- .text-lowercase - Indicates lowercased text
- .text-uppercase - Indicates uppercased text
- .text-capitalize - Indicates capitalized text
- .initialism - Displays the text inside an abbr element in a slightly smaller font size
- .list-unstyled - Removes the default list-style
- .list-inline - Places all list items on a single line (used together with .list-inline-item on each li elements)
- .text-muted
- .text-primary
- .text-success
- .text-info
- .text-warning
- .text-danger
- .text-secondary
- .text-white
- .text-dark
- .text-body (default body color/often black)
- .text-light
- .bg-primary
- .bg-success
- .bg-info
- .bg-warning
- .bg-danger
- .bg-secondary
- .bg-dark
- .bg-light
- .text-bg-primary
- .text-bg-success
- .text-bg-info
- .text-bg-warning
- .text-bg-danger
- .text-bg-secondary
- .text-bg-dark
- .text-bg-light
- .table
- .table-striped
- .table-bordered
- .table-hover
- .table-dark
- .table-borderless
- .table-sm class makes the table smaller by cutting cell padding in half.
- .table-responsive class adds a scrollbar to the table when needed.
- .table-responsive-sm < 576px
- .table-responsive-md < 768px
- .table-responsive-lg < 992px
- .table-responsive-xl < 1200px
- .table-responsive-xxl < 1400px
For each row,
- .table-primary - Blue: Indicates an important action
- .table-success - Green: Indicates a successful or positive action
- .table-danger - Red: Indicates a dangerous or potentially negative action
- .table-info - Light blue: Indicates a neutral informative change or action
- .table-warning - Orange: Indicates a warning that might need attention
- .table-active - Grey: Applies the hover color to the table row or table cell
- .table-secondary - Grey: Indicates a slightly less important action
- .table-light - Light grey table or table row background
- .table-dark - Dark grey table or table row background
- .rounded
- .rounded-circle
- .img-thumbnail
- .float-start
- .float-end
- .mx-auto - margin:auto
- .d-block - display:block
- .img-fluid - max-width: 100%; and height: auto
- .btn
- .btn-primary, .btn-secondary, .btn-success, .btn-link etc.,
- .btn-outline-primary, .btn-outline-secondary, btn-outline-success etc.,
- .btn-lg & btn-sm
- .btn-block (full width) but parent .d-grid
- .active & .disabled
- .spinner-border (span element as child) & .spinner-grow
- .btn-group (parent) and groups of buttons are being used as child elements
- .btn-group-lg
- .btn-group-sm
- .btn-group-vertical
- .dropdown-toggle
- .alert
- .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark
- alert-dismissible (button as child element with class .btn-close)