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.