BOOTSTRAP
1. Grid System
Container: Defines the layout container, which can be container, container-fluid,
or container-{breakpoint}.
Rows and Columns: Bootstrap uses a 12-column grid system, and elements are placed
inside row and col classes like col-md-6, col-lg-4, etc.
Responsive Breakpoints: Breakpoints include xs (extra small), sm (small), md (medium),
lg (large), xl (extra large), and xxl (extra extra large).
2. Typography
Headings and Text: Classes like h1, h2, etc., define headings, while text-muted, text-
primary, and other utility classes modify text color and alignment.
Display Headings: Larger headings for hero sections, e.g., display-1 to display-6.
Text Alignment and Transformation: Use text-left, text-center, text-
uppercase, etc., for alignment and transformation.
3. Forms
Form Controls: Classes like form-control for inputs, form-select for dropdowns,
and form-check for checkboxes.
Form Layouts: Supports inline forms, floating labels, and input groups.
Validation: Built-in validation classes such as is-valid and is-invalid.
4. Buttons
Basic Buttons: Classes like btn, btn-primary, btn-secondary, and btn-outline-* for
buttons of different styles.
Button Sizes: Use btn-lg, btn-sm for large and small buttons.
5. Components
Navbar: Responsive navigation bars using navbar, navbar-expand-*, and navbar-
light or navbar-dark.
Card: Flexible content containers with classes like card, card-body, and card-header.
Carousel: For slideshows using the carousel class and controls like carousel-
control-prev and carousel-control-next.
Modals: Dialogs or popups created with modal, modal-dialog, and modal-body.
Alerts: Use alert classes to create dismissible alerts.
6. Utilities
Spacing: Margin (m-*) and padding (p-*) utilities such as m-3, p-4 to control spacing.
Flexbox Utilities: Control layout using d-flex, justify-content-*, and align-
items-* for flexible layouts.
Display: Show or hide elements with d-none, d-inline, and d-block.
Colors: Use bg-primary, text-success, and other classes to add background or text
colors.
Positioning: Control positioning with position-relative, position-absolute, etc.
7. Responsive Design
Bootstrap 5 is mobile-first and responsive by default. Elements automatically adjust
across different screen sizes.
Use breakpoints like col-md-6, d-lg-none, or d-sm-block to customize the layout for
different devices.
8. Icons
Bootstrap Icons: While Bootstrap 5 does not come with built-in icons, you can integrate
the official Bootstrap Icons.
9. JavaScript Components
Collapse: Toggle content visibility using collapse and collapse.show.
Dropdowns: Interactive dropdown menus using dropdown and dropdown-toggle.
Tooltips and Popovers: Add additional information with tooltip and popover
components.
Offcanvas: Sliding content panels with offcanvas for navigation and sidebars.
10. Custom Properties (CSS Variables)
Bootstrap 5 makes extensive use of CSS variables for easier customization, allowing you
to override the default theme by changing variables like --bs-primary for colors and
spacing.
