Bootstrap Classes Cheat Sheet

Below is a cheat sheet for some common Bootstrap classes. Bootstrap is a popular front-end framework that simplifies the process of designing responsive and mobile-friendly websites. These classes can be applied to HTML elements to achieve various styling and layout effects.

Grid System

• Container:
  • .container: Fixed-width container.
  • .container-fluid: Full-width container.
• Rows and Columns:
  • .row: Create a row.
  • .col- or .col-md-: Create columns (e.g., .col-12, .col-md-6).

Typography

• Headings:
  • .h1 to .h6: Header tags.
• Text Alignment:
  • .text-left, .text-center, .text-right, .text-justify.
• Font Weight:
  • .font-weight-bold, .font-weight-normal.

Buttons

• Button Styles:
  • .btn: Basic button.
  • .btn-primary, .btn-secondary, etc.: Styled buttons.
• Button Sizes:
  • .btn-lg, .btn-sm, .btn-block.

Forms

• Form Control:
  • .form-control: Style for input, textarea, and select.
• Input Sizes:
  • .form-control-lg, .form-control-sm.

Navigation

• Navbar:
  • .navbar: Basic navbar container.
  • .navbar-expand and .navbar-expand-{breakpoint}: Responsive navbar.
• Nav Items:
  • .nav: Create a navigation list.
  • .nav-item and .nav-link: List items and links.

Alerts

• Alerts:
  • .alert: Basic alert container.
  • .alert-primary, .alert-success, etc.: Styled alerts.

Cards

• Card:
  • .card: Basic card container.
  • .card-header, .card-body, .card-footer: Card sections.
• Card Styles:
  • .bg-primary, .text-white: Background and text color.

Images

• Image Classes:
  • .img-fluid: Responsive image.

Utilities

• Spacing:
  • .m-1, .p-2: Margin and padding classes.
  • .mt-3, .pb-4: Margin-top and padding-bottom.
• Visibility:
  • .d-none, .d-block: Show/hide elements.
• Text Alignment:
  • .text-left, .text-center, .text-right.

This cheat sheet covers some basic and commonly used Bootstrap classes. For more detailed information and additional classes, refer to the official Bootstrap documentation.