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¶
.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.