Skip to content

Bootstrap Cheat Sheet

Bootstrap is a popular CSS framework for developing responsive and mobile-first websites. Below is a cheat sheet of commonly used components and utilities.

Layout

  • .container - Fixed-width container, which changes size at different breakpoints.
  • .container-fluid - Full width container, spanning the entire width of the viewport.
  • .row - Wrapper for columns, ensures proper spacing via gutters.
  • .col - Auto layout columns. Add breakpoints to define the width (e.g., .col-md-6).

Content

Typography

  • .h1 to .h6 - Heading classes that match the default HTML heading elements.
  • .lead - Makes a paragraph stand out.
  • .text-muted - De-emphasizes a block of text.

Images

  • .img-fluid - Makes an image responsive (will scale nicely to the parent element).
  • .img-thumbnail - Adds a rounded border around an image.

Components

Buttons

  • .btn - Base class for all buttons. Combine with .btn-primary, .btn-secondary, etc., to specify the visual theme.
  • .btn-group - Groups a series of buttons together on a single line.
  • .navbar - Responsive navigation header, includes support for branding, navigation, and more.
  • .navbar-brand - Brand/logo.
  • .navbar-nav - Navigation container.
  • .nav-link - Individual navigation items.

Card

  • .card - A flexible and extensible content container with multiple variants and options.
  • .card-body - The container for card content.
  • .card-title - The title of the card.
  • .card-text - The text content within a card.

List Group

  • .list-group - Creates a list of items.
  • .list-group-item - An individual item in the list group.

Forms

  • .form-control - Makes an input field styled in Bootstrap's theme.
  • .form-label - Label for form elements.
  • .form-group - Wrapper for form elements for proper spacing.

Utilities

  • .text-center, .text-right, .text-left - Text alignment.
  • .bg-primary, .bg-success, .bg-warning, etc. - Background color.
  • .text-primary, .text-success, .text-warning, etc. - Text color.
  • .mt-0 to .mt-5, .mb-0 to .mb-5, etc. - Margin top and bottom utilities (0-5 scale).
  • .pt-0 to .pt-5, .pb-0 to .pb-5, etc. - Padding top and bottom utilities (0-5 scale).

Grid System

  • Use .row and .col-{breakpoint}-{size} for grid layouts. Breakpoints can be -sm, -md, -lg, -xl, -xxl.

This cheat sheet covers basic classes and components in Bootstrap 5. For a more comprehensive guide, refer to the official Bootstrap documentation.