The Ultimate Bootstrap Cheat Sheet: The Master List of Bootstrap Resources


Let’s be honest. If you’re a seasoned developer, you would already have developed a love for the Bootstrap framework due to its ease of use and extensive support from the community. We are offering you an amazingly compiled bootstrap cheat sheet.

Bootstrap is also the most efficient framework for building mobile-first, responsive projects that provide optimum performance on the web. This is why Bootstrap is regarded to be the most commonly used and widely popular framework that developers from all around the world use for HTML, CSS, and JS-based projects.

If you’ve ever dabbled in web development, you would have most likely heard about Bootstrap at some point on your journey. And if you’re already accustomed to the requirements of web development using Bootstrap, the importance of picking the right Bootstrap Admin Templates is something that must have already crossed your mind.

In this article, we give you detailed guidance on how to choose the right Bootstrap website templates to ensure the optimum performance of your web application project. We also give you an exhaustive list of codes and commands that you need to get started with the framework.

However, before we get to that, let’s run a quick refresher course on the Bootstrap framework to get you up to speed.

Here is the Bootstrap Cheat Sheet of all the bootstrap class List
You can easily copy the class and paste it into your project

Alerts
alert-primary
alert-secondary
alert-success
alert-info
alert-warning
alert-danger
alert-light
alert-dark
alert-link
alert-dismissible
alert-heading
Badges
badge
badge-pill
badge-primary
badge-secondary
badge-success
badge-info
badge-warning
badge-danger
badge-light
badge-dark
Breadcrumbs
breadcrumb
Buttons
btn-primary
btn-secondary
btn-success
btn-info
btn-warning
btn-danger
btn-light
btn-dark
btn-link
btn-outline-primary
btn-outline-secondary
btn-outline-success
btn-outline-info
btn-outline-warning
btn-outline-danger
btn-outline-light
btn-outline-dark
Button Groups
btn-group
btn-group-lg
btn-group-sm
btn-group-vertical
btn-group (nested)
btn-toolbar
Button Modifiers
btn-lg
btn-sm
btn-block
active button
disabled button
checkbox as button
radio as button
Cards
card
card-body
card-title
card-subtitle
card-text
card-link
card-img-top
middle image
card-img-bottom
card-img-overlay
list-group
card-header
h*.card-header
card-footer
card-group
card-deck
card-columns
card bg-… text-…
Carousel
carousel slide
carousel-fade
carousel-indicators
carousel-caption
Collapse
collapse
accordion
Dropdowns
dropdown
dropdown (split)
dropup
dropup (split)
dropright
dropleft
dropdown-header
dropdown-item-text
dropdown-divider
dropdown-item disabled
dropdown-menu-right
Forms
form-group
form-inline
form using the grid
form-control
form-control-lg
form-control-sm
form-control-file
form-control-plaintext
form-control-range
form-check
form-check-inline
disabled items
readonly
Form Input Groups
input-group
input-group-prepend
input-group-append
input-group-sm
input-group-lg
checkbox
radio
dropdown
segmented buttons
Custom Forms
custom-checkbox
custom-radio
custom-switch
custom-select
custom-file
custom-range
Grid
container
container-fluid
row
col-# ( <576px)
col-sm-# ( ≥576px)
col-md-# ( ≥768px)
col-lg-# ( ≥992px)
col-xl-# ( ≥1200px)
col
col-*
no-gutters
offset-*-#
order-#
nested columns
Images
img-fluid
img-thumbnail
Jumbotron
jumbotron
jumbotron-fluid
List Group
list-group
list-group-item active
list-group-item disabled
list-group-item-action
list-group-item-primary
list-group-item-secondary
list-group-item-success
list-group-item-info
list-group-item-warning
list-group-item-danger
list-group-item-light
list-group-item-dark
list-group with badges
list-group with d-flex
list-group-horizontal
Media Objects
media
nested media
d-flex align-self-start
d-flex align-self-center
d-flex align-self-end
right aligned media
Modal
modal
modal-dialog-centered
modal-dialog-scrollable
modal fade
modal-lg
modal-sm
modal-xl
Navs
ul.nav
nav.nav
nav justify-content-*
nav flex-column
nav-tabs
nav-pills
nav-fill
nav-justified
nav with flex utils
nav-tabs with dropdown
nav-pills with dropdown
Navbar
navbar
navbar-brand
navbar with form
navbar-text
navbar-dark bg-dark
navbar-light
navbar fixed-top
navbar fixed-bottom
navbar sticky-top
collapse navbar-collapse
navbar-toggler
navbar-expand-*
Pagination
pagination
page-item disabled
page-item active
pagination-lg
pagination-sm
Popover
popovers
dismissible popover
Progress
progress
progress-bar
progress-bar with label
progress-bar with height
progress-bar bg-*
multiple progress-bar
progress-bar-striped
progress-bar-striped bg-*
progress-bar-animated
Scrollspy
data-spy
Spinner
spinner-border
spinner-border text-*
spinner-border-sm
spinner-grow
spinner-grow text-*
spinner-grow-sm
Tables
table
thead-light
thead-dark
table-striped
table-bordered
table-borderless
table-hover
table-sm
table-*-responsive
table-reflow
table-active
table-primary
table-secondary
table-success
table-info
table-warning
table-danger
table-light
table-dark
Toasts
toast
Tooltips
tooltip
Typography
display-# (1-4)
lead
blockquote
blockquote-footer
blockquote-reverse
list-unstyled
list-inline
dl-horizontal
Utility: Borders
border
border-*-0
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light
border-dark
border-white
rounded
rounded-sm
rounded-lg
rounded-circle
rounded-0
rounded-*
Utility: Colors
bg-primary
bg-secondary
bg-success
bg-info
bg-warning
bg-danger
bg-light
bg-dark
bg-white
text-primary
text-secondary
text-success
text-info
text-warning
text-danger
text-light
text-dark
text-white
Utility: Display
d-*-block
d-*-flex
d-*-inline
d-*-inline-block
d-*-inline-flex
d-*-none
d-*-table
d-*-table-cell
d-print-…
Utility: Flexbox
flex-*-column
flex-*-column-reverse
flex-*-row
flex-*-row-reverse
flex-*-nowrap
flex-*-wrap
flex-*-wrap-reverse
flex-fill
flex-*-grow-1
flex-*-grow-0
flex-*-shrink-1
flex-*-shrink-0
justify-content-*-start
justify-content-*-end
justify-content-*-center
justify-content-*-between
justify-content-*-around
align-content-*-start
align-content-*-end
align-content-*-center
align-content-*-around
align-content-*-stretch
align-items-*-start
align-items-*-end
align-items-*-center
align-items-*-baseline
align-items-*-stretch
align-self-*-start
align-self-*-end
align-self-*-center
align-self-*-baseline
align-self-*-stretch
order-*-#
Utility: Misc
close
embed-responsive
shadow-none
shadow-sm
shadow
shadow-lg
invisible
visible
sr-only
sr-only-focusable
stretched-link
Utility: Positioning
align-*
clearfix
fixed-top
fixed-bottom
sticky-top
float-*-left
float-*-right
float-*-none
Utility: Sizing
w-100
h-100
mw-100
mh-100
Utility: Spacing
m-1 / m-*-#
mt-1 / mt-*-#
mr-1 / mr-*-#
mb-1 / mb-*-#
ml-1 / ml-*-#
mx-1 / mx-*-#
my-1 / my-*-#
m-n1 / m-*-n#
p-1 / p-*-#
pt-1 / pt-*-#
pr-1 / pr-*-#
pb-1 / pb-*-#
pl-1 / pl-*-#
px-1 / px-*-#
py-1 / py-*-#
Utility: Text
font-weight-bold
font-weight-bolder
font-weight-light
font-weight-lighter
font-weight-normal
text-decoration-none
font-italic
text-monospace
text-justify
text-nowrap
text-*-left
text-*-right
text-*-center
text-lowercase
text-uppercase
text-capitalize
text-truncate
text-body
text-black-50
text-white-50
text-muted
text-hide
text-break
What Exactly is Bootstrap?
If we intend to classify Bootstrap in segments, there are three main files that you should be aware of:

bootstrap.css – It is a CSS framework
bootstrap.js – It is a JavaScript/jQuery framework
glyph icons – It’s a set of iconic fonts
In addition to the segments mentioned above, Bootstrap also requires jQuery for functioning. jQuery happens to be a widely used and extremely popular JavaScript library, which adds cross-browser compatibility to JavaScript and also simplifies the entire task.

There are other parts of this project that you would require learning as you advance through the learning levels, and they are:

Grunt
Gulp
Sass
LESS
Bower
npm, etc
Why is Bootstrap Growing in Popularity?
Even a few years ago, when mobile phones were not all over the place, Bootstrap was a relatively unknown application framework.

With the advancements experienced across technology, more developers are figuring out the importance of adopting this particular framework and the various Bootstrap dashboard templates as a means of developing mobile responsive applications that not only appeal to the end-users but also generate the best possible performance on different screen sizes and browsers.

Features of Bootstrap: Why You Should Adopt This State-of-the-art Framework?
Easy to Use
Mobile-Friendly
Customizable
Simple Integration
A wide range of Pre-styled Components is available
Responsive Features at your disposal
Browser Compatibility
Prolific Grid System
Comes with an extensive list of Components
Bundle of Javascript plugins
Good Documentation
Base styling available for most HTML Elements
Ease of usage
If you’re equipped with just a basic knowledge of CSS and HTML, you can start using Bootstrap.

Responsive features
The responsive CSS provided by Bootstrap helps your application to resize and render according to the displays on your phones, desktops, and tablets.

Mobile-Friendly
Bootstrap development adopts a mobile-first approach, which happens to be the platform’s main USP.

Simple Integration
One of the main advantages of using Bootstrap is that it can be simply integrated with other frameworks and platforms, on both existing and newer sites. You can use particular Bootstrap elements with your current CSS.

Pre-styled Components
Bootstrap brings into play some pre-styled components for dropdowns, alerts, nav bars, etc.

Customizable
Bootstrap provides you the opportunity to customize the framework as per the requirements of your project design.

Browser compatibility
Bootstrap is functionally compatible with all modern browsers; including Safari, Opera, Chrome, Firefox, and Internet Explorer.

Prolific grid system
Bootstrap is built upon responsive 12-column grids, components, and layouts. Whether you need a responsive grid or a fixed one, all you need to do is a few changes to the configuration, and you’re ready to roll.

Bundle of JavaScript plugins
The components such as the drop-down menus have been made interactive, thanks to the implementation of the numerous JavaScript plugins that are provided in a bundle along with the bootstrap package.

Bootstrap Bundle comes with an extensive list of components
Whether you need pagination, alert boxes, or drop-down menus, Bootstrap gives you everything you demand. Some of the pre-styled components that come along with the bundle are:

Dropdowns
Button Groups
Navigation Bar
Breadcrumbs
Labels & Badges
Alerts
Progress Bar, etc.
Good documentation
Bootstrap provides easy-to-follow documentation illustrated with appropriate examples and demos, which in turn makes the learning process an easier one for those who are just getting started.

Base styling available for most HTML elements
A website consists of numerous different elements, namely headings, tables, lists, buttons, forms, etc. In Bootstrap, styles are provided for the following HTML elements:

Typography Code
Tables
Forms
Buttons
Images
Icons
USPs of the Bootstrap Framework
Unmatched Responsiveness
The need for responsiveness is something that you must not overlook at any stage. Nowadays, hundreds of devices are being launched in the marketplace, hence optimizing for each one individually is next to impossible.

With responsive designs in your arsenal, you improve your chances of accessing the widest audience for your product. Gone are the days when you needed to spend additional dollars for the development of responsive web applications.

You can simply choose from a wide array of Bootstrap Templates and themes available on the web.

Easy-to-use Grid systems
One of the most vital aspects of a framework is the grid system, which provides the base on which the entire layout is about to be created. Bootstrap’s core CSS also allows a developer to add helpful styling to tables, forms, buttons, images, lists and fully functioning navigation bars. The core JavaScript helps you to add helpful codes for the creation of alerts, carousels, dropdowns, pop-ups, and accordions.

Bootstrap commands cheat sheet to help you get started
In case you were looking for a list of some of the most effective and widely important Bootstrap commands, we are here to deliver you as per your expectations.

This is our ultimate master list of Bootstrap resources that you were looking for in the first place. To help make the process of Bootstrap class organization easy, let us elaborately explain the difference and specific characteristics you should be aware of:

.align-*
This is a set consisting of utility classes that are equivalent to the task of writing the CSS property. You may use this across the inline as well as the table cell elements. This particular class in Bootstrap falls in the Utility category.

.align-content-*
This specific class can be added to the parent flexbox container for the process of determining how the elements are to be aligned horizontally. This too falls in the category of Utilities.

.align-items-*
This particular class is added to the flexbox child items for executing the task of specifying whether it must align at the top or bottom of the specific container it is originally placed in. This again falls in the Utility category.

.align-self-*
These are used in the flexbox items for aligning them vertically as compared to the main parent container. In case columns are used, all the items would align vertically. This falls in the Utility class.

.align-text-*
This particular set of utility classes is equivalent to the process of writing the CSS property. Use them on inline as well as table cell elements. These too, belong to the utility category.

.badge-*
Used for counters and labels across applications. It belongs to the Badge category.

.bg-*
These utility classes denote the determination of background colors.

.border-*
This specific border utility class lets you add or remove borders or change the border color.

.btn-outline-*
Used for helping button variations to have an outlined button instead of having a solid background. It belongs to the Buttons category.

.carousel-control-*
In case you have any image carousel with pagination, you may use this carousel class in the next and previous anchor links.

.carousel-fade
This enables the animation of the transition of slides with a crossfade instead of a traditional slide movement. This is a utility class.

.col
This ensures that the Flexbox items automatically achieve equal width. Therefore, you may use this class when you wish the columns to measure equally. This command belongs to the Grid class.

.col-*
This class is used to determine grid columns to determine the column width. And it also determines the breakpoint. This class works from the breakpoint that you set and every other thing larger in size.

.custom-range
This class changes the default styling of a form input range.

.d-flex
It helps in setting the element to have a style property.

.d-none
This too helps to set the element to have a style property display.

.d-*d-*
This particular responsive display utility class lets you specify the instance when any display property is to be applied to the element.

*d-print-*
It helps in changing the display of elements when you print the document.

.fixed-*
This class helps you to fix an element to the top or bottom of the browser.

.flex-*-*-*
It helps you to change the layout, size, or alignment of the flexbox items layout, alignment, or size.

.flex-fill-*
It helps you to force all sibling elements into equal widths. And also helps you to fill up the entire available horizontal space.

.flex-(grow l shrink)-*
It helps to force an element to shrink or grow for consuming more or less of the entire space available.

.float-*-*
This is a responsive utility that helps you enable an element to float in the container.

.form-control-plaintext
It helps you to remove the default styling and also enables you to preserve the correct padding and margin.

.form-row
This particular class works identically to a grid row. However, it’s a much more compact one that helps the form look more uniform.

.h-*
This specific height utility class makes the element achieve a percentage height of the parent element.

.invalid-feedback
You can add this particular class with server-side form validation for adding a feedback message to any invalid field.

.is-*
You may use this particular class for setting feedback colors based on the inputs of the error messages.

.justify-content-*-*
This particular class helps you to specify where the flex items are to be positioned inside a container.

.m*-*-*
Applies margin to an element using responsive breakpoints.

.p*-*-*
Applies padding to an element using responsive breakpoints.

.progess-bar-animated
When you add this class to a progress bar, the progress would be animated with the help of css3 animations.

.nav-fill
Makes the navigational items utilize all the available horizontal space. Navigational items can be of different widths based on their content.

.nav-justified
This particular command allows you to make all the navigational items acquire equal width. This also allows the item to utilize the entire horizontal space available in the box.

.navbar-collapse
This specific class allows the navigational links to collapse and show the same to the users when it is toggled upon; using a mobile phone.

.navbar-expand-*
On mobile phone display screens, the navbar generally displays to be collapsed. At this point, the main function of this tag is to determine the exact breakpoint where you wouldn’t want the navbar to collapse.

.navbar-text
This specific tag allows a particular text to acquire a center position vertically; inside the navbar.

.navbar-toggler-icon
This cheeseburger navigation icon can be set utilizing an SVG background image across three horizontal lines.

.no-gutters
It allows the developer to remove the negative margin present in the row as well as the padding from child columns. This command can prove extremely helpful, especially when you intend to expand an image to the browser’s edge without a padding effect on the right and left edges.

.order-*-*
This particular class can be used for controlling the order of elements on a page. Regardless of their original orders in the source code. Therefore, using this command, you can easily rearrange the layout as per your requirements.

.rounded-*
Initially written as .img-rounded, the class had been renamed for adding a border-radius. This offers you the flexibility of adding borders to whatever elements you require.

.visible
This particular command allows you to hide an element’s visibility without changing its respective display properties.

The command classes that we have listed above should give you maximum abilities for bringing significant changes to your overall web application design.

Assuming that you’re just getting started with this particular framework, you can surely try executing a few tasks by implementing the commands that we have mentioned here. Additionally, we are pretty sure that you would be astonished to experience how simple it is to work on Bootstrap and bring about remarkable designs.

Hopefully, our article has proved to be helpful and provided you with enough resources to hone your Bootstrap skills. Nevertheless, it is worth noting that whatever we have mentioned in this article is just a percentage of what you can achieve as a web developer using Bootstrap.

There are more opportunities than you can expect from a full-fledged network like the one provided by Wrappixel. We wish you all the very best with your upcoming design projects.

How to use Bootstrap? Learn Bootstrap in 5 min



Bootstrap is a framework that helps you make responsive websites. It includes HTML and CSS-based design templates for common user interface components like dropdowns, buttons, typography, tabs, tables, and for other navigations, etc. So let’s learn how to use Bootstrap in our project.
Bootstrap is based on all open standards HTML, CSS, and JavaScript. This means that it can be used with any server-side technology and any platform. You can use it in any application built with any server-side technology.
Responsive means when the size of the window or screen changes the layout of the website still looks good. To incorporate Bootstrap into your application there are two things we can do.

1. You can either import the Bootstrap into our code
2. You can download a sample project to make it your way.

In this tutorial, we’ll provide you step-by-step instructions with proper code snippets to give you a better viewpoint on how to use Bootstrap.

## **How to use Bootstrap**

As we’ve talked about that we can import Bootstrap into our code. So, if you want to import into your code there are two ways to import it.

- The first one is downloading the Bootstrap and linking it locally
- Either Way, get the link from the internet

**Bootstrap CDN**

1. Currently, in my case, I’m linking from the internet. To do that just navigate to the getbootstrap.com website and copy the [Bootstrap CDN](https://getbootstrap.com/docs/4.5/getting-started/download/) code to your project.
![Bootstrap CDN](https://blog.wrappixel.com/wp-content/uploads/2020/09/bootstrap-cdn-doc.jpg)


This way we can add Bootstrap to our project with just simple and easy navigation. But make sure that you’ll paste the code into your header tag of Html code.
Now if we save this and open up our index.html again. You’ll notice the styling change on the website. That is because Bootstrap already has some CSS built in which makes the header, paragraph, and all the styling a bit different.

## **Download the Code for Development**

**Downloading Bootstrap Libraries**

1. The second way is by downloading the compiled files to work locally offline or without the Internet, you can go directly by clicking on this link.
![Download bootstrap](https://blog.wrappixel.com/wp-content/uploads/2020/09/compiled-css-js.jpg)


Unzip and we must have two folders: CSS and js in addition to a list of files, these files will sometimes be different from the version you download. Also, note that each file is duplicated in normal and min. The difference is that the min versions are optimized to load faster, while in the normal versions we can edit the CSS code. We can use either version without problems.
Another very important thing is that some components like Modal and Navbar require JavaScript to work. Therefore, we must separately download the two files jquery-3.3.1.slim.min.js and popper.min.js at the moment we will not use them, but if you want to download them you must add them to the js folder.
**How to integrate Bootstrap Libraries into a project**
As we already have the CSS and js folders at hand, the next step is to take them to the project to be edited, said the project must be hosted in the htdocs folder of the local XAMPP server. For example, we are going to copy and paste them into the main folder called project.
**Linking CSS and JS files in an HTML document**
What we have left now is to use the sublime text 3 code editor or another editor. To link Bootstrap CSS and js files to an HTML document and check its operation.
Create a new index.html document and link the Bootstrap.css library in the head with the link tag and enter the file path in the href, then enter the other js libraries in script tags with the file path in the src as appropriate at the end of the bodysuit

![How to add bootstrap in html code](https://blog.wrappixel.com/wp-content/uploads/2020/09/css-js-in-html-page.jpg)


But if we want it we can always override whatever Bootstrap has in our own CSS. Now, the thing that makes Bootstrap responsive is its 12 columns grid. Documentation can sometimes be confusing.
What I meant actually by that is Bootstrap divides a web page into rows and columns. Each row is divided into 12 columns. You can learn to Bootstrap other functionalities as well.
An element, say a paragraph, an image or a header can take up any number of these columns. You can also have multiple elements in one row. An element can also take up all 12 rows or 1 column or similar.
No, no matter what the screen size is it’s broken up into 12 columns. So, you can specify how many columns you want for each element on a small, medium, large or extra-large screen.

## **Bootstrap Components List**

There are a lot of components that Bootstrap provides us to build or create navigational components either menus or alerts that help us visualize our data more perfectly. We’ve listed some of the components that how you’ll learn Bootstrap
Some of the components are mentioned below:

- Dropdown menus
- Button Groups
- Button Drop down menus
- Breadcrumbs and many more
## **Advantages of Using Bootstrap**

There are several advantages of Bootstrap. Let’s look at some of the advantages.

- **the support of responsive website design**: This is one of the greatest advantages of using Bootstrap because it’s faster and much easier. As it automatically adapts to different screen sizes.
- **It saves a lot of time and effort**. (Instead of writing code from scratch Bootstrap uses blocks of code that you can use and customize based on your project requirements). There are a lot of websites that offer free and paid Bootstrap themes that save even more development time.
- **Consistency** (It is developed by Twitter to encourage consistency across their internal tools by giving their developers a centralized development code base. Since all the developers are working on the same code base so the end result would be consistent.)
- **Customizable** (Bootstrap is highly customizable, if you are using only a few features of Bootstrap then you can customize to download only those features using the Bootstrap customize page.)
- **Support as** it is the most popular framework it has a very large community base and excellent documentation. Bootstrap’s excellent documentation examples and demos help the developer learn Bootstrap quickly even if you are new to it. If you’ve ever run into an issue you will usually get help quickly and easily from the vast online community and web forums that are available.

In this post, we’ve discussed how to use Bootstrap in simple and easy steps without getting much effort. This will help you learn Bootstrap within no time. If you want a similar post then do let us know, we’ll be waiting for your worthy feedback.


The Ultimate Bootstrap Cheat Sheet: The Master List of Bootstrap Resources

How to use Bootstrap? Learn Bootstrap in 5 min

All rights reserved by bootstrap-admintemplates.com