1. .border
2. .border-top
3. .border-end
4. .border-bottom
5. .border-start

1. .m-0 - No Margin
2. .mt-5 - Margin Top
3. .mr-6 - Margin Right
4. .m-5 - Large Margin

1. p-0 - No padding
2. pt-5 - Large padding top
3. pr-5 - Large padding right

1. d-inline - display inline
2. d-block - display block
3. d-flex - display flex
4. d-none - display none
5. d-none d-lg-block - Visible on large screens, hidden on smaller resolutions

1. .shadow
2. .shadow-none
3. .shadow-sm
4. .shadow-lg

1. .lead - Makes a paragraph stand out
2. .text-start - Indicates left-aligned text
3. .text-break - Prevents long text from breaking layout
4. .text-center - Indicates center-aligned text
5. .text-decoration-none - Removes the underline from a link
6. .text-end - Indicates right-aligned text
7. .text-nowrap - Indicates no wrap text
8. .text-lowercase - Indicates lowercased text
9. .text-uppercase - Indicates uppercased text
10. .text-capitalize - Indicates capitalized text
11. .initialism - Displays the text inside an abbr element in a slightly smaller font size
12. .list-unstyled - Removes the default list-style
13. .list-inline - Places all list items on a single line (used together with .list-inline-item on each li elements)

1. .text-muted
2. .text-primary
3. .text-success
4. .text-info
5. .text-warning
6. .text-danger
7. .text-secondary
8. .text-white
9. .text-dark
10. .text-body (default body color/often black)
11. .text-light

1. .bg-primary
2. .bg-success
3. .bg-info
4. .bg-warning
5. .bg-danger
6. .bg-secondary
7. .bg-dark
8. .bg-light

1. .text-bg-primary
2. .text-bg-success
3. .text-bg-info
4. .text-bg-warning
5. .text-bg-danger
6. .text-bg-secondary
7. .text-bg-dark
8. .text-bg-light

1. .table
2. .table-striped
3. .table-bordered
4. .table-hover
5. .table-dark
6. .table-borderless
7. .table-sm class makes the table smaller by cutting cell padding in half.
8. .table-responsive class adds a scrollbar to the table when needed.
9. .table-responsive-sm < 576px
10. .table-responsive-md < 768px
11. .table-responsive-lg < 992px
12. .table-responsive-xl < 1200px
13. .table-responsive-xxl < 1400px

For each row,

1. .table-primary - Blue: Indicates an important action
2. .table-success - Green: Indicates a successful or positive action
3. .table-danger - Red: Indicates a dangerous or potentially negative action
4. .table-info - Light blue: Indicates a neutral informative change or action
5. .table-warning - Orange: Indicates a warning that might need attention
6. .table-active - Grey: Applies the hover color to the table row or table cell
7. .table-secondary - Grey: Indicates a slightly less important action
8. .table-light - Light grey table or table row background
9. .table-dark - Dark grey table or table row background

1. .rounded
2. .rounded-circle
3. .img-thumbnail
4. .float-start
5. .float-end
6. .mx-auto - margin:auto
7. .d-block - display:block
8. .img-fluid - max-width: 100%; and height: auto

1. .btn
2. .btn-primary, .btn-secondary, .btn-success, .btn-link etc.,
3. .btn-outline-primary, .btn-outline-secondary, btn-outline-success etc.,
4. .btn-lg & btn-sm
5. .btn-block (full width) but parent .d-grid
6. .active & .disabled
7. .spinner-border (span element as child) & .spinner-grow
8. .btn-group (parent) and groups of buttons are being used as child elements
9. .btn-group-lg
10. .btn-group-sm
11. .btn-group-vertical
12. .dropdown-toggle

1. .alert
2. .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark
3. alert-dismissible (button as child element with class .btn-close)