ootstrap 5 CSS Classes Overview

1. Layout & Grid

• .container, .container-fluid, .container-{breakpoint}

• .row — Row for grid columns

• .col, .col-auto, .col-{breakpoint}, .col-{breakpoint}-{number} — Responsive columns

• .g-{number}, .gx-{number}, .gy-{number} — Gutters spacing

• .order-{number}, .order-{breakpoint}-{number} — Column ordering

• .offset-{number}, .offset-{breakpoint}-{number} — Column offsetting

2. Content

• Typography

  • .h1 to .h6 — Headings

  • .lead — Lead paragraph

  • .small, .mark, .blockquote, .text-truncate

• Text alignment

  • .text-start, .text-center, .text-end

  • Responsive versions: .text-{breakpoint}-start

• Text color

  • .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-body, .text-muted, .text-white, .text-black-50, .text-white-50

• Background color

  • .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, .bg-white, .bg-transparent

3. Display & Visibility

• .d-none, .d-inline, .d-inline-block, .d-block, .d-grid, .d-flex, .d-inline-flex

• Responsive versions: .d-{breakpoint}-none, .d-{breakpoint}-block, etc.

• .visible, .invisible

4. Flexbox

• .flex-row, .flex-column, .flex-row-reverse, .flex-column-reverse

• .flex-grow-0, .flex-grow-1

• .flex-shrink-0, .flex-shrink-1

• .justify-content-start, .justify-content-center, .justify-content-end, .justify-content-around, .justify-content-between, .justify-content-evenly

• .align-items-start, .align-items-center, .align-items-end, .align-items-baseline, .align-items-stretch

• .align-content-start, .align-content-center, .align-content-end, .align-content-between, .align-content-around, .align-content-stretch

• .align-self-auto, .align-self-start, .align-self-center, .align-self-end, .align-self-baseline, .align-self-stretch

5. Spacing

• Margin: .m{t|b|s|e|x|y}-{0|1|2|3|4|5|auto}

• Padding: .p{t|b|s|e|x|y}-{0|1|2|3|4|5}

• Examples:

  • .mt-3 — margin-top: 1rem (default spacing scale)

  • .px-2 — padding left & right

  • .mb-auto — margin-bottom auto

6. Sizing

• Width: .w-25, .w-50, .w-75, .w-100, .w-auto

• Height: .h-25, .h-50, .h-75, .h-100, .h-auto

• Max-width: .mw-100

• Max-height: .mh-100

7. Borders & Rounding

• Borders: .border, .border-top, .border-end, .border-bottom, .border-start, .border-0, .border-{color}

• Rounded corners: .rounded, .rounded-top, .rounded-end, .rounded-bottom, .rounded-start, .rounded-circle, .rounded-pill, .rounded-0

8. Images

• .img-fluid — responsive image

• .img-thumbnail — image with border and padding

• .rounded-circle — circular image

9. Tables

• .table — base table styling

• .table-striped — zebra stripes

• .table-bordered — borders around cells

• .table-hover — hover effect on rows

• .table-sm — smaller table

• .table-responsive — responsive wrapper

10. Buttons

• Base: .btn

• Variants: .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, .btn-link

• Sizes: .btn-lg, .btn-sm, .btn-block (use .w-100 now)

• States: .active, .disabled

11. Helpers & Utilities

• .clearfix — clear floats

• .stretched-link — make an entire block clickable

• .text-wrap, .text-nowrap, .text-break

• .user-select-none, .user-select-all, .user-select-auto

• .visually-hidden, .visually-hidden-focusable

12. Position

• .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky

• Position utilities: .top-0, .bottom-0, .start-0, .end-0, .translate-middle, .translate-middle-x, .translate-middle-y

13. Shadows

• .shadow — small shadow

• .shadow-sm — smaller shadow

• .shadow-lg — larger shadow

• .shadow-none — remove shadow

14. Overflow

• .overflow-auto, .overflow-hidden, .overflow-visible, .overflow-scroll