Bootstrap is a popular front-end web development framework that allows developers to quickly and easily create responsive and mobile-first websites. It includes pre-designed HTML, CSS, and JavaScript components that can be easily customized and combined to create complex web interfaces.
One of the key benefits of Bootstrap is its use of a 12-column grid system that allows developers to easily create layouts for their web pages. The grid system is based on the concept of responsive design, which means that web pages can automatically adjust to different screen sizes and devices, such as desktops, tablets, and smartphones.
Bootstrap also includes a wide range of pre-designed UI components, such as navigation menus, forms, buttons, and alerts, that can be easily customized to match the look and feel of your website. Additionally, Bootstrap provides a set of utility classes that can be used to quickly style elements, such as fonts, colors, and spacing.
The Bootstrap cheat sheet provides a handy reference guide to all of the classes available in the Bootstrap framework. Organized by theme, the cheat sheet lists the classes and their descriptions in a table format, making it easy for developers to quickly find the classes they need for their web projects.
Cheat Sheet
Layout
Class
Description
.container
Centers content on the page and sets a max-width
.container-fluid
Full width container
.row
Container for columns
.col-*
Define column width based on a 12-column grid system
.col-sm-*
Define column width for small screens
.col-md-*
Define column width for medium screens
.col-lg-*
Define column width for large screens
.col-xl-*
Define column width for extra large screens
.offset-*
Set an offset for a column
.offset-sm-*
Set an offset for a column on small screens
.offset-md-*
Set an offset for a column on medium screens
.offset-lg-*
Set an offset for a column on large screens
.offset-xl-*
Set an offset for a column on extra large screens
Typography
Class
Description
.h1 – .h6
Define heading styles
.display-1 – .display-4
Larger, display-style headings
.lead
Increases the font size of a paragraph
.text-*
Define text color, alignment, and other properties
.font-weight-*
Define font weight
.font-italic
Make text italic
.text-truncate
Truncate text with an ellipsis
.text-nowrap
Prevent text from wrapping
Buttons
Class
Description
.btn
Basic button
.btn-*
Define button size, color, and other properties
.btn-outline-*
Define an outline button
.btn-group
Group buttons together
.btn-group-vertical
Vertically stack buttons in a group
.btn-block
Make button full width
.disabled
Disable button
.active
Apply active state to a button
Forms
Class
Description
.form-control
Define input field styles
.form-control-*
Define input field size
.form-group
Group form elements together
.form-check
Define styles for a checkbox or radio button
.form-check-inline
Place checkboxes or radio buttons inline
.form-control-file
Style a file input field
.form-control-range
Style a range input field
.form-control-plaintext
Style plain text in a form
.form-inline
Display form elements inline
.form-row
Group form elements into rows
.was-validated
Apply validation styles to a form
.form-text
Add text to a form field
Navigation
Class
Description
.nav
Define a navigation list
.nav-link
Define a navigation link
.nav-item
Define a navigation item
.nav-pills
Create a pill-style navigation
.nav-tabs
Create a tab-style navigation
.navbar
Create a navigation bar
.navbar-expand-*
Define the breakpoint for when the navbar should expand
.navbar-dark
Use dark text for the navbar
.navbar-light
Use light text for the navbar
.navbar-brand
Define the branding for a navigation bar
.navbar-toggler
Define a toggle
.navbar-text
Add text to a navigation bar
.dropdown
Create a dropdown menu
.dropdown-menu
Define the menu for a dropdown
.dropdown-item
Define an item in a dropdown menu
.dropdown-divider
Create a divider between items in a dropdown menu
.dropdown-toggle
Define the trigger for a dropdown
.fixed-top
Fix a navigation bar to the top of the page
.fixed-bottom
Fix a navigation bar to the bottom of the page
Alerts
Class
Description
.alert
Define an alert box
.alert-*
Define the color of an alert box
.alert-dismissible
Add a close button to an alert box
.close
Define a close button
.fade
Add a fade effect to an alert box
.show
Show an alert box
Badges
Class
Description
.badge
Define a badge
.badge-*
Define the color of a badge
.badge-pill
Create a pill-style badge
Cards
Class
Description
.card
Define a card
.card-body
Define the body of a card
.card-title
Define the title of a card
.card-subtitle
Define a subtitle for a card
.card-text
Define the text of a card
.card-img-top
Define an image for the top of a card
.card-header
Define the header of a card
.card-footer
Define the footer of a card
Modals
Class
Description
.modal
Define a modal
.modal-dialog
Define the modal dialog
.modal-content
Define the content of a modal
.modal-header
Define the header of a modal
.modal-title
Define the title of a modal
.modal-body
Define the body of a modal
.modal-footer
Define the footer of a modal
.fade
Add a fade effect to a modal
.show
Show a modal
Carousel
Class
Description
.carousel
Define a carousel
.carousel-item
Define an item in a carousel
.carousel-control-prev
Define the previous control for a carousel
.carousel-control-next
Define the next control for a carousel
.carousel-indicators
Define the indicators for a carousel
Utilities
Class
Description
.d-*
Define display properties
.flex
Create a flexible container
.justify-content-*
Define horizontal alignment in a flex container
.align-items-*
Define vertical alignment in a flex container
.text-*
Define text color, alignment, and other properties
.bg-*
Define background color
.rounded-*
Define border radius
.border
Define a border
.border-*
Define a specific border
.m-*
Define margin
.p-*
Define padding
.float-*
Define float properties
.clearfix
Clear floats
.invisible
Hide an element
.visible-*
Show an element
.sr-only
Hide an element visually but keep it accessible for screen readers
.sr-only-focusable
Hide an element visually but keep it accessible for screen readers when focused
.text-truncate
Truncate text with an ellipsis
.font-weight-bold
Define bold text
.font-italic
Define italic text
.text-nowrap
Prevent text from wrapping
.text-lowercase
Convert text to lowercase
.text-uppercase
Convert text to uppercase
.text-capitalize
Capitalize the first letter of each word
.lead
Define larger and emphasized text
.display-*
Define display properties for headings
.text-muted
Define muted or faded text
.text-hide
Hide text visually but keep it accessible for screen readers