Bootstrap Cheat Sheet - A Basic Guide to Bootstrap

Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.

👁 Bootstrap Cheat Sheet

What is Bootstrap Cheat Sheet?

A Bootstrap Cheat Sheet is a comprehensive, quick-reference guide that provides web developers with an easy way to access the various classes, components, and utilities available in the Bootstrap framework. It’s a valuable tool that can significantly enhance the efficiency and productivity of web development.

Table of Content

Forms

Bootstrap provides ready-to-use form styles, including input fields, checkboxes, radio buttons, and more. Easily create user-friendly forms with minimal effort.

Element	Description	Syntax
Form control	Default class for styling elements.	.form-control
Select	Shows a collapsible list of values that can be selected.	.form-select
Checks and radio	Used for radio-buttons and checkboxes	.form-check
Range	Defines the range	.form-control-range
Layout	Two major layout options. Fluid and fixed layout
Validation	Used to apply validation.	:valid|invalid
Datalist	Style the data list using form-control classes.
Input group	Added as a wrapper around each input type or form control.	.input-group

Example Code:

Input Groups

Input Groups in Bootstrap are used to combine form controls with text, buttons, or other elements using input groups. Useful for search bars, currency inputs, and more.

Class	Description	Syntax
Prepend	Adds group to the front of the input.	.input-group-prepend
Append	Add group behind the input.	.input-group-append
Text	Styles the text that is displayed inside the group.	.input-group-text
Small	Makes input groups smaller.	.input-group-sm
Large	Makes input groups larger.	.input-group-lg
Group	Makes size of the input group default.	.input-group

Example Code:

Navbars

Design responsive navigation bars that adapt to different screen sizes. Customize menus, logos, and navigation links.

Navbars	Description	Syntax
Basic	Creates default navbar	.navbar
Inverted	Inverts the color of default navbar	.navbar-inverse
Colored	Changes background color	.bg-*
Right-aligned	Right aligns the navbar	.navbar-right
Fixed	Fixes the navigation bar at the top of the webpage.	.navbar-fixed-top
Dropdown	Makes a drop-down interface.	.dropdown
Collapsible	Makes a collapsible navbar	.navbar-collapse

Code:

Alerts

Alerts provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages. Alerts are available for any length of text, as well as an optional close button. There are eight types of alerts available in Bootstrap 5.

Each of the classes has different colors associated with them.

Class	Description	Syntax
Primary	Alert is blue in color..	.alert-primary
Secondary	Shows alert in the secondary background color.	.alert-secondary
Success	Shows the alert green color.	.alert-success
Danger	Alert is red in color.	.alert-danger
Warning	Shows the alert in the color yellow	.alert-warning
Info	Shows the alert in the color light blue.	.alert-info
Light	Alert is in light gray background color.	.alert-light
Dark	Shows the alert in dark gray background color.	.alert-dark
Dismissible	Shows alert with a close button.	.alert-dismissible

Example Code:

Badges

Badges are numerical indicators to highlight the number of items associated with a link or new or unread item. The class. badge within the <span> element is used to create badges.

We can have some variations in badges using the following classes:

Class	Description	Syntax
Contextual variations	Used to change the appearance  of a badge.	.badge .bg-*
Pill Badges	Used to make badges more rounded	.rounded-pill

Example Code:

Breadcrumbs

Create breadcrumb trails to indicate the user’s location within a website’s hierarchy. Useful for navigation and context. It provides a backlink to each previous page the user navigates through. 

Syntax:

<ol class="breadcrumb">
 <li class="breadcrumb-item"> Content .. </li>
</ol>

Example Code:

Button

Bootstrap offers versatile button styles, sizes, and states. Use them for calls to action, form submissions, or toggling functionality. Bootstrap also provides classes that can be used for changing the state and size of buttons, and also, provides classes for applying toggle,checkbox, and radio buttons-like effects.

Button type	Description	Syntax
Solid	Used to create solid button styles.	.btn-*
Outlined	Creates outlined buttons.	.btn-outline-*
Changing Size	Changes the size of button.	.btn-lg|sm|block
Toggle	Toggles the state of the button	<button data-toggle="button">
Radio	Creates radio styled buttons	<input type="checkbox">
Checkbox	Creates checkbox styled buttons	<input type= "radio">

Example Code:

Button groups

Bootstrap allows us to group a series of buttons together in a single line vertically or horizontally(without spaces) using the button group class. These classes are as follows:

Class	Description	Syntax
Style	Add styles to buttons	.btn-primary|default|success|info|link
Size	Changes the sizing of buttons.	.btn-group-*
Nesting	Stacks the button in vertical manner	.btn-group-vertical
Vertical	Creates a dropdown menu within the buttons	.btn-group
Button toolbar	Combine button groups into button toolbars	.btn-toolbar

Example Code:

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. 

Type	Description	Syntax
Basic	The building block of a card is the card-body and card.	.card .card-body
Headers and footers	Provides header and footer to the card.	.card-header|footer
Title and Links	Gives a title and link to the card.	.card-title|link
Images	Used to add images to the card.	.card-img
Overlays	Adds overlay to the card image	.card-img-overlay
Card Group	Used to add groups to the card	.card-deck
List group	Creates a list of content in card.	.card

Example Code:

Carousel

Carousal is used in bootstrap to create slideshows of images on a website. It is used to cycle through a series of images and text. Significant parts of a carousal are:

Type	Description	Syntax
Slide	The content and image of each slide is defined here	.carousel .slide
Fade	Used to add a fading effect to the transition.	.carousel-fade
Indicators	The indicators are the little dots at the bottom of each slide.	.carousel-indicators
Captions	Adds text associated with image to the carousal.	.carousel-captions
Controls	Alows us to go back and forth.	.carousel-control-next|previous-icon

Example Code:

Grids

Bootstrap's grid system allows up to 12 columns across the page. The grid system helps align page elements based on sequenced columns and rows. We use this column-based structure to place text, images, and functions in a consistent way throughout the design.

Components	Description	Syntax
Container	It is a container of row elements	.container
Row	Container for column elements	.row
Column	Used to specify the number of available columns.	.col
column reset	Used to resolve issues regarding viewport.	.clearfix
column offset	Moves the columns to the right by x columns.	.col-md|lg|cs-offset-value
Extra Small	Used for portrait mobile phones.	.col-xs
Small	Used for Landscapes phones	.col-sm
Medium	Used for Tablets/Phablets	.col-md
large	Used for Small-sized Desktops/Laptops	.col-lg
Extra large	Used for Larger-sized Desktops/Laptops	.col-xl

Example Code:

Pagination

Pagination is used to enable navigation between pages on a website. The pagination used in Bootstrap has a large block of connected links that are hard to miss and easily scalable.

Type	Description	Syntax
Basic	Specifies pagination on a list group.	.pagination
Disabled	Makes pagination appear unclickable.	.disabled
Active	Highlights the currently active page	.active
Sizing	Changes the sizing of the pagination group	.pagination-sm|md|lg
Alignment	Sets the alignement of pagination group	.justify-content-center|end

Example Code:

Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.

Class	Description	Syntax
Divider	Creates a horizontal list to divide dropdown menu	.dropdown
Header	Adds header section inside the dropdown list.	.dropdown-header
Disable and active items	Used to diable and enable list of items.	.active|disabled
Dropdown position	Sets the position of dropdown list.	.dropright|dropleft
Dropdown Menu Right Aligned	Right aligns the dropdown menu.	.dropdown-menu-right
Dropup	Expands the menu list upwards.	.dropup
Dropdown text	Adds plain text in the dropdown menu list.	.dropdown-item-text
Grouped Buttons with a Dropdown	Creates a group of buttons in the dropdown list.	.btn-group
Split Button Dropdowns	Splits the dropdown buttons.	.dropdown-toggle-split
Vertical Button Group Dropdown List	Creates a vertical button group.	.btn-group-vertical

Example Code:

List group

List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way.

Class	Description	Syntax
Disabled	Makes the list group disabled.	.disabled
Active	Indicates the currently active item.	.active
Hyperlinks and Buttons	Creates actionable list items with multiple states.	.list-group-item-action
Flush	Flush class to remove some borders and rounded corners data	.list-group-flush
Contextual	Style list items with suitable backgrounds and colors.	.list-group-item-primary|secondary|info|light
Badges	Adds badges to list group items.	.badge

Example Code:

Popovers

Popovers are used to display additional information about any element and are displayed with a click of a mouse pointer over that element.

Syntax:
data-toggle="popover" 
title="Popover Header" 
data-content="Some content inside the box"

The data-toggle attribute defines the Popover, the title attribute defines the Tile for the Popover and the data-content attribute is used to store the content to be displayed in the respective Popover.

Class	Description	Syntax
Right-alignment	Displays the popover at right of the element.	data-placement= "right"
Left-alignment	Displays the popover at left of the element.	data-placement= "left"
Bottom-alignment	Displays the popover at bottom of the element.	data-placement= "bottom"
Top-alignment	Displays the popover at top of the element.	data-placement= "top"

Example Code:

Spinners

The spinners are used to specify the loading state of a component or webpage. Bootstrap facilitates the various classes for creating different styles of spinners by modifying their appearance, size, and placement.

Class	Description	Syntax
Border	Used to rotate the spinner	.spinner-border
Grow	Used for growing spinners.	.spinner-grow
Margin	Adds margins to the spinners.	.m- value
Placement	Places spinners at different positions	.d-flex
Size	Changes the size of the spinners.	.spinner-border-sm|md|lg|xl

Example Code:

Scroll Spy

Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy is used to update the navigation links when scrolling the page. The following attributes are added with the elements for the implementation of this feature. 

Attribute	Description	Syntax
Data-spy	This element is added to the scrollable area.	data-spy="scroll"
Data-target	Connects the navigation bar with the scrollable area.	data-target = ".id"
Data-offset	Specifies the number of pixels to offset from the top.	data-offset = "value"

Example Code:

Tooltips

A tooltip is quite useful for showing the description of different elements in the webpage. The tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depend on the 3rd party library Tether for positioning. We can even customize this tooltip according to our requirements. Some of them are:

Class	Description	Syntax
Placement	Used to place a tooltip.	data-placement = "top|bottom|right|left"
Html	Adds HTML to a tooltip.	data-html = "true"
Offset	Sets the offset of the tool-tip relative to target.	data-offset = "number|string"
Animation	Adds or removes animation to tooltip.	data-animation = "true|false"
Trigger	Adds the event which will trigger tooltip.	data-trigger = "hover focus"

Example Code:

Jumbotron

Bootstrap Jumbotron is a responsive component whose main goal is to draw the visitor’s attention or highlight a special piece of information. Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value.

Fluid Jumbotron: To create a full-width Jumbotron we use the jumbotron-fluid class along with the Jumbotron class.

Example Code:

Toasts

Toast is used to create something like an alert box which is shown for a short time like a couple of seconds when something happens. Like when the user clicks on a button or submits a form and many other actions.

• .toast: It helps to create a toast.
• .toast-header: It helps to create the toast header.
• .toast-body: It helps to create toast body
• .toast(“show”): It shows the toast
• .toast(“hide”): It hides the toast
• .toast(“dispose”): It disposes of the toast

Some of the events of toast are:

Event	Description
show.bs.toast	Occurs when the toast is about to be shown.
shown.bs.toast	Occurs when the toast is shown.
hide.bs.toast	Happens when the toast is about to be hidden.
hidden.bs.toast	Happens when the toast is fully hidden.

Example Code:

Modal

Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

Syntax:

<div class="modal"> Contents... <div>

Class	Description	Syntax
Popovers	Added inside the modal.	.modal
Content	Triggers same modal with different data	.modal-content
Extra Large Modal	Provides the largest modal size with a max-width of 1140px.	.modal-xl
Large Modal	Provides a large modal size with a max-width of 800px.	.modal-lg
Small Modal	Provides a small modal size with a max-width of 300px.	.modal-sm

Example Code:

Borders

Borders are generally used to display an outline around a box or table cell or any other HTML element. In Bootstrap, there are different classes available to add or remove borders. The classes that are used to add borders are referred to as Additive classes and those that are used to remove borders are referred to as subtractive classes.

Class	Description	Syntax
Border	Adds a border all around the element.	.border
Border top	Adds a border on top edge of the element.	.border-top
Border right	Adds a border on the right of the element.	.border-right
Border bottom	Adds a border on the bottom of the element.	.border-bottom
Border left	Adds a border on the left of the element.	.border-left
Radius	Makes the corner of the border curved.	.rounded
Color	Used to add color to the border.	.border-*

Example Code:

Benefits of Bootstrap Cheat Sheet

• Efficient Web Development: A Bootstrap Cheat Sheet provides a quick reference guide for web developers, enabling faster and more efficient coding. It helps in reducing the time spent on searching for classes or components, thereby increasing productivity.
  
• Comprehensive Component Reference: The cheat sheet includes an extensive collection of Bootstrap components, classes, and utilities, covering everything from basic typography and buttons to complex components like modals and carousels. This makes it a valuable resource for both beginners and experienced developers.
  
• Responsive Design: With the inclusion of Bootstrap classes in the cheat sheet, developers can create more responsive and mobile-first web content. It aids in enhancing the user experience and engagement on web pages across different devices.
  
• Interoperability: Bootstrap is a popular front-end framework. A Bootstrap Cheat Sheet can be beneficial when working with other web technologies like HTML, CSS, JavaScript, and various web development frameworks.
  
• Optimized for Performance: A well-structured Bootstrap code using the correct classes and components can significantly improve the performance of web applications. The cheat sheet can guide developers in creating performance-optimized web pages.
  
• Consistency: Bootstrap provides a consistent framework that supports major of all browsers and CSS compatibility fixes. It’s also lightweight and customizable. The cheat sheet can guide developers in creating consistent and uniform web pages.

Remember, using a Bootstrap Cheat Sheet can greatly enhance your web development process, making it a must-have tool for every web developer.

We have Complete tutorial post with the proper roadmap of Bootstrap that includes Bootstrap 4 and Bootstrap 5. This tutorial contains each and every classes of any component with multiple possible examples.