Bootstrap Cheat Sheet

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

ClassDescription
.containerCenters content on the page and sets a max-width
.container-fluidFull width container
.rowContainer 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

ClassDescription
.h1 – .h6Define heading styles
.display-1 – .display-4Larger, display-style headings
.leadIncreases the font size of a paragraph
.text-*Define text color, alignment, and other properties
.font-weight-*Define font weight
.font-italicMake text italic
.text-truncateTruncate text with an ellipsis
.text-nowrapPrevent text from wrapping

Buttons

ClassDescription
.btnBasic button
.btn-*Define button size, color, and other properties
.btn-outline-*Define an outline button
.btn-groupGroup buttons together
.btn-group-verticalVertically stack buttons in a group
.btn-blockMake button full width
.disabledDisable button
.activeApply active state to a button

Forms

ClassDescription
.form-controlDefine input field styles
.form-control-*Define input field size
.form-groupGroup form elements together
.form-checkDefine styles for a checkbox or radio button
.form-check-inlinePlace checkboxes or radio buttons inline
.form-control-fileStyle a file input field
.form-control-rangeStyle a range input field
.form-control-plaintextStyle plain text in a form
.form-inlineDisplay form elements inline
.form-rowGroup form elements into rows
.was-validatedApply validation styles to a form
.form-textAdd text to a form field

Navigation

ClassDescription
.navDefine a navigation list
.nav-linkDefine a navigation link
.nav-itemDefine a navigation item
.nav-pillsCreate a pill-style navigation
.nav-tabsCreate a tab-style navigation
.navbarCreate a navigation bar
.navbar-expand-*Define the breakpoint for when the navbar should expand
.navbar-darkUse dark text for the navbar
.navbar-lightUse light text for the navbar
.navbar-brandDefine the branding for a navigation bar
.navbar-togglerDefine a toggle
.navbar-textAdd text to a navigation bar
.dropdownCreate a dropdown menu
.dropdown-menuDefine the menu for a dropdown
.dropdown-itemDefine an item in a dropdown menu
.dropdown-dividerCreate a divider between items in a dropdown menu
.dropdown-toggleDefine the trigger for a dropdown
.fixed-topFix a navigation bar to the top of the page
.fixed-bottomFix a navigation bar to the bottom of the page

Alerts

ClassDescription
.alertDefine an alert box
.alert-*Define the color of an alert box
.alert-dismissibleAdd a close button to an alert box
.closeDefine a close button
.fadeAdd a fade effect to an alert box
.showShow an alert box

Badges

ClassDescription
.badgeDefine a badge
.badge-*Define the color of a badge
.badge-pillCreate a pill-style badge

Cards

ClassDescription
.cardDefine a card
.card-bodyDefine the body of a card
.card-titleDefine the title of a card
.card-subtitleDefine a subtitle for a card
.card-textDefine the text of a card
.card-img-topDefine an image for the top of a card
.card-headerDefine the header of a card
.card-footerDefine the footer of a card

Modals

ClassDescription
.modalDefine a modal
.modal-dialogDefine the modal dialog
.modal-contentDefine the content of a modal
.modal-headerDefine the header of a modal
.modal-titleDefine the title of a modal
.modal-bodyDefine the body of a modal
.modal-footerDefine the footer of a modal
.fadeAdd a fade effect to a modal
.showShow a modal

Carousel

ClassDescription
.carouselDefine a carousel
.carousel-itemDefine an item in a carousel
.carousel-control-prevDefine the previous control for a carousel
.carousel-control-nextDefine the next control for a carousel
.carousel-indicatorsDefine the indicators for a carousel

Utilities

ClassDescription
.d-*Define display properties
.flexCreate 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
.borderDefine a border
.border-*Define a specific border
.m-*Define margin
.p-*Define padding
.float-*Define float properties
.clearfixClear floats
.invisibleHide an element
.visible-*Show an element
.sr-onlyHide an element visually but keep it accessible for screen readers
.sr-only-focusableHide an element visually but keep it accessible for screen readers when focused
.text-truncateTruncate text with an ellipsis
.font-weight-boldDefine bold text
.font-italicDefine italic text
.text-nowrapPrevent text from wrapping
.text-lowercaseConvert text to lowercase
.text-uppercaseConvert text to uppercase
.text-capitalizeCapitalize the first letter of each word
.leadDefine larger and emphasized text
.display-*Define display properties for headings
.text-mutedDefine muted or faded text
.text-hideHide text visually but keep it accessible for screen readers
.bg-transparentDefine a transparent background
.bg-primaryDefine a primary background color
.bg-secondaryDefine a secondary background color
.bg-successDefine a success background color
.bg-dangerDefine a danger background color
.bg-warningDefine a warning background color
.bg-infoDefine an info background color
.bg-lightDefine a light background color
.bg-darkDefine a dark background color
.bg-whiteDefine a white background color
.text-primaryDefine a primary text color
.text-secondaryDefine a secondary text color
.text-successDefine a success text color
.text-dangerDefine a danger text color
.text-warningDefine a warning text color
.text-infoDefine an info text color
.text-lightDefine a light text color
.text-darkDefine a dark text color
.text-whiteDefine a white text color