Bootstrap5

Classes used inside BOOTSTRAP5 with their little description:

A brief overview of the most commonly used classes in Bootstrap 5, organized by their function.
Each description is kept short and to the point.

Layout
- .container: Creates a responsive fixed-width container.
- .container-fluid: Creates a full-width container, spanning the entire width of the viewport.
- .row: Creates a horizontal group of columns.
- .col: Defines a column and its size in a grid layout.

Grid System
- .col-{size}-{number}: Defines the number of columns a section should span (e.g., .col-md-4
spans 4 out of 12 columns at medium screen sizes).
- .offset-{size}-{number}: Adds a left margin that offsets the number of columns (e.g., .offset-
md-2 adds an offset of 2 columns at medium screen sizes).

Typography
- .text-{alignment}: Sets the text alignment (e.g., .text-center for centered text).
- .text-{color}: Sets the text color (e.g., .text-primary for primary color text).
- .fw-{weight}: Sets the font weight (e.g., .fw-bold for bold text).
- .lead: Highlights text as a lead paragraph.

Colors
- .bg-{color}: Sets the background color (e.g., .bg-success for a green background).
- .text-{color}: Sets the text color (e.g., .text-danger for red text).

Spacing
- .m{side}-{breakpoint}-{size}: Adds margin (e.g., .mt-3 adds a top margin).
- .p{side}-{breakpoint}-{size}: Adds padding (e.g., .p-2 adds padding on all sides).

Flex
- .d-{breakpoint}-flex: Applies a flex container (e.g., .d-flex for flex display).
- .justify-content-{alignment}: Aligns items horizontally (e.g., .justify-content-center).
- .align-items-{alignment}: Aligns items vertically (e.g., .align-items-center).

Utilities
- .rounded: Adds rounded corners.
- .shadow: Adds a box shadow.
- .d-{value}: Controls display property (e.g., .d-none for display: none).
- .visible, .invisible: Controls visibility.

Buttons
- .btn: Base class for buttons.
- .btn-{style}: Defines the button style (e.g., .btn-primary for a blue button).
- .btn-{size}: Adjusts the button size (e.g., .btn-lg for a large button).

Forms
- .form-control: Styles an input field.
- .form-check: Styles a checkbox or radio button.
- .input-group: Wraps an input with additional elements like buttons.

Components
- .card: Creates a card component.
- .modal: Creates a modal dialog.
- .navbar: Styles a navigation bar.
- .alert: Styles an alert box.

Tables
- .table: Styles a table.
- .table-{modifier}: Adds table variations (e.g., .table-striped for striped rows).

This list covers the basic and most commonly used classes in Bootstrap 5. For more detailed
information, refer to the official Bootstrap 5 documentation.