Bootstrap Cheat Sheet

Bootstrap, the open-source front-end framework initially developed by Twitter, revolutionizes web development with its mobile-first approach. This cheat sheet delves into Bootstrap, offering a blend of fundamental concepts, advanced features, and practical snippets for responsive web design.

Bootstrap's foundation lies in its use of HTML, CSS, and Javascript, ensuring compatibility across major browsers, including the latest Bootstrap 5 version. Notably, Bootstrap 3 extends support to Internet Explorer 8-9. The framework's responsive components, built on the base-modifier methodology, offer seamless customization to enhance website aesthetics.

Whether you're a beginner exploring basics or a seasoned developer seeking quick references, this article is a comprehensive guide. It empowers you to create responsive websites efficiently by covering everything from Bootstrap's skeleton and starter templates to its versatile components. Embrace Bootstrap's capabilities to craft stunning web pages that respond elegantly to different devices, enhancing user experience across various screen sizes.

Bootstrap Skeleton

The following code is the starter template of a Bootstrap.
It includes the CDN Links of Bootstrap to include Bootstrap in the project.
This code outputs the text "Hello World!".

Uses of Bootstrap

Bootstrap is an open-source framework. That means it is entirely free to use. You don't have to spend much money to build a consistent and responsive website.
Bootstrap is compatible with most popular browsers like Chrome, Firefox, Safari, Opera, etc.
Bootstrap is very easy, to begin with. A person having basic knowledge of HTML and CSS can start using Bootstrap.
Bootstrap components are self-adjustable on different screen sizes like mobile phones, tablets, or computer screens.
All the components and features provided by Bootstrap can be easily customized.
The websites created by using Bootstrap are mobile-friendly.

Features of Bootstrap

Bootstrap provides various components like buttons, Drop-downs, Progress-bars, etc.
Bootstrap provides beginner-friendly templates that inexperienced developers can use to create beautiful websites.
Web Pages designed by using Bootstrap are responsive; they adjust on all screen sizes, whether it is a mobile screen or a computer screen.
Code reusability is a helpful feature of Bootstrap that saves developers a lot of coding time and makes development easier.
Bootstrap allows customized styling and alignment of components to make the website more customized as per requirement.
It provides a robust grid system.
Bootstrap is compatible with all modern browsers.
Bootstrap also contains various javascript components like modals, tooltips, popovers, etc., to enhance the website's interactivity.

Alerts

It is a popup with a predefined message that displays after any action performed by the user.
The base class for using the alert component is .alert.
Bootstrap provides various contextual classes that allow you to create colorful alerts for any text.They are:

1) .alert-primary The primary alert represents a more important message. The text appears in light blue.

Code:

2) .alert-secondary A secondary alert represents a less important message. The text appears in light gray color.

Code:

3) .alert-success It is used for successful actions.

Code:

4) .alert-warning It will send a message of warning.

Code:

5) .alert-danger

A danger alert appears in response to more negative actions (e.g., being locked out after entering too many incorrect passwords).

Code:

6) .alert-link You can add the .alert-link class to any links inside the alert box to create matching colored links.

Code:

7) .alert-dismissible

Alert-dismissible gives an option to close the alert after reading it.

Code:

7) .alert-light It displays alerts in light colors.

Code:

8) .alert-dark It displays alerts in dark colors.

Code:

9) .alert-heading It is used for adding a heading to your alert.

Code:

Buttons

The buttons are used to execute an action in the form, dialogue box, etc., and they are pre-styled using CSS.
The .btn class is used to create a button and various classes to style buttons are:

1) .btn It is used to adjust the button's size and spacing.

Code:

2) .btn-primary The .btn-primary class displays buttons with blue background.

Code:

3) .btn-secondary It is used to display the buttons with a grey background.

Code:

4) .btn-success

It displays the button with green background.

Code:

5) .btn-info It is used for displaying any information.

Code:

6) .btn-warning It displays the button with a yellow background.

Code:

7) .btn-danger It displays the button with a red background.

Code:

8) .btn-light It displays a light-colored button.

Code:

9) .btn-dark It displays a dark-colored (black) button.

Code:

10) .btn-link Btn-link keeps the spacing established by the.btn class and eliminates the outer border.

Code:

11) .btn-outline It creates buttons with outlines instead of a solid background.

Code:

12) .btn-lg To create a large button.

Code:

13) .btn-sm To create a small button

Code:

14) .btn-block This groups the buttons in a block. All grouped buttons will take up the entire width of a parent.

Code:

Breadcrumbs

Breadcrumbs are navigational components that allow users to move from page to page without getting lost and provide a way to return to a previous page.
Breadcrumb navigation links back to each previous page visited by the user and displays the user's current location within a website.

Code:

Badges

It is a labeling component that is used to add extra information.
Other context elements, such as .badge-warning, can be used to create and style them.
Additionally, badges will resize to match the parent element's size (such as headings).
You can also include badges as a component of buttons or links to add counters.
Following are the classes used to create and style badges:

1) .badge It is used to create a basic badge.

Code:

2) .badge-pill This command is used to modify the shape of badges by making them more rounded.

Code:

3) .badge-primary It is used to add a badge to the primary message.

Code:

4) .badge-secondary It is used to add a badge to the secondary message.

Code:

5) .badge-success It is used to display a success badge.

Code:

6) .badge-warning It is used to display a warning badge.

Code:

7) .badge-danger It is used to display a danger badge.

Code:

8) .badge-light It is used to display a badge with light background.

Code:

9) .badge-dark It is used to display a badge with dark background.

Code:

Cards

Cards include different options like headers and footers, display options, and different colors, and they have a small amount of padding around their content.
Cards can contain a variety of content, including text, list groups, links, images, and more, and following are some classes used to create and style cards:

1) .card To use a basic card, add the .card class to the <div> element.

Code:

2) .card-title It is used to give the title to the card.

Code:

3) .card-subtitle It is used to add subtitles to the card.

Code:

4) .card-link It is used for adding a link to the card.

Code:

5) .card-text This class wraps the content in the card container.

Code:

6) .card-img-top It is used to enclose an image on the top of the card.

Code:

7) .card-img-bottom Image is displayed at the bottom of the card after the card content.

Code:

8) .card-img-overlay It is used to display image in the background of the card.

Code:

9) .card-header It is used to add a custom header to the card that will be placed at the top of all the titles and subtitles.

Code:

10) .card-footer It is used to add a footer to the card for displaying some extra information.

Code:

11) .card-group Each card in a card group will function as a single, attached element and have the same width and height.

Code:

12) .card-deck It is used to create a group of cards that are not attached and are the same height and width.

Code:

Pagination

Pagination is used for navigating between pages on a website when there are multiple pages and various classes to create and style paginations are:

1) .pagination Used to create pagination.

Code:

2) .page-item disabled Used to disable one or multiple page numbers or item from being clicked.

Code:

3) .page-item active Used to indicate the current page by highlighting it with blue color.

Code:

4) .pagination-lg It displays the pagination bigger and bolder.

Code:

5) .pagination-sm Used to display the pagination block smaller

Code:

Carousel

Carousels are used to implement an image slideshow on our website. They are built with CSS 3D transforms and a bit of Javascript and various classes used to create and style carousels are:

1) .carousel slide It adds animation and CSS transition effect to the slides.

Code:

2) .carousel-fade It is used to add the fade-out effect for a slide before the next slide appears.

Code:

3) .carousel-indicators It is used to add an indicator or previous/next controls.

Code:

4) .carousel-caption It is used to add caption to each or multiple individual slides.

Code:

Collapse

The collapse component is a Javascript plugin that uses the.collapse class to show or hide content. The various classes are:

1) .collapse: It is used to create a collapse that displays and hides content.

Code:

2) .collapse show Used to display the collapsed content.

Code:

3) .collapse.options It is used to make content active as a collapsible element.

Code:

4) .accordion It is used to build vertically collapsible accordions by using the Collapse JavaScript plugin.

Code:

Dropdowns

Dropdown menus are contextual toggle menus that show links as lists.
They give the user the option of selecting one value from a predetermined list. The various classes are:

1) .dropdown This class allows you to display additional navigation by adding a dropdown to the navbar, and tabs.

Code:

2) .dropdown-toggle-split It is used to create split button dropdowns with the appropriate amount of space around the dropdown caret.

Code:

3) .dropup It is used to create menus that appear going top rather than down.

Code:

4) .dropright It is used to create a dropdown menu going on the right side.

Code:

5) .dropleft It is used to create a dropdown menu going on the left side.

Code:

6) .dropdown-item-text It is used to add non-interactive list items(text instead of links) to the dropdown menu.

Code:

7) .dropdown-item disabled It is used to disable one or multiple menu items.

Code:

8) .dropdown-divider It is used to insert a thin horizontal border between the dropdown menu items to separate them.

Code:

9) .dropdown-menu-right It is used to align the entire dropdown menu to right side.

Code:

Forms

The form element is used to collect multiple user inputs by using input fields such as checkboxes, text areas, text fields, etc. The various classes are:

1) .form-group To use the form component, wrap labels and controls in a <div> element with the .form-group class.

Code:

2) .form-inline The form has left margins and all elements are inline.

Code:

3) .form-control This class is used to style all textual form controls such as <input> <select>,<textarea>, etc.

Code:

4) .form-control-lg It is used to create larger form input controls.

Code:

5) .form-control-sm It is used to create smaller form input controls.

Code:

6) .form-control-file This class is used to provide the user with an option to upload a file in the form.

Code:

7) .form-control-plaintext It is used to have <input readonly> contents in the form without losing the original margin and padding.

Code:

8) .form-control-range It is used to create horizontally scrollable range inputs in the form.

Code:

9) .form-check It is used to add checkboxes in the form. Code:

You can use form-check-input type="radio" to add radio buttons rather than checkboxes.

10 form-check-inline It is used to create a list of checkboxes aligned horizontally.

Code:

11) disabled Used to add items that cannot be clicked.

Code:

12) readonly It is used to create input controls that can only be read and could not be modified.

Code:

Grid System

The grid system in Bootstrap makes use of a number of containers, rows, and columns to create the layout and align content. It’s built using flexbox and is fully responsive in nature.
Up to 12 columns can be placed across a page using the grid system in Bootstrap.
There are six default customizable breakpoints in Bootstrap Grid. They are:
- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)
The various classes are:

1) container It is used to create a container for the grid.

Code:

2) container-fluid It is used to create a full-width container that spans the entire viewport.

Code:

3) row Used to create the row elements for the grid layout.

Code:

4) col-# ( viewport <576px) It is used to create a column with specified width.

Code:

5) col-sm-# ( ≥576px) Used to create smaller columns with specific width.

Code:

6) col-md-# ( ≥768px) It is used to create medium size columns with specific width.

Code:

7) col-lg-# ( ≥992px) It is used to create large size columns with specific width.

Code:

8) col-xl-# ( ≥1200px) It is used to create extra large size columns with specific width.

Code:

9) col It is used to create equal size columns for all screen sizes.

Code:

10) col-* It is used to create equal width columns with specified breakpoint such as sol-sm, col-md, etc.

Code:

11) no-gutters It is used to remove horizontal padding between the columns and margins between the rows.

Code:

12) offset-*-# It is used to create small, medium, large or extra large offsets with specified size.

Code:

13) order-# It is used to specify the order in which the columns should display in the grid.

Code:

14) nested columns Creating columns inside column is known as nesting of columns.

Code:

Jumbotron

By adding numerous margins and enlarging headings, the Jumbotron emphasizes and draws attention to any distinctive content or information by making it stand out and be more noticeable.
The various classes are:

1. jumbotron It is used to create a jumbotron by adding the .jumbotron class to <div> element.

Code:

2. jumbotron-fluid It is utilized to slightly alter the jumbotron's appearance and expand it to fill the entire page without rounded corners.

Code:

The header that appears at the top of the page is the navigation bar. It is used to increase usability, making it simpler for users to navigate the website and carry out direct searches for relevant topics.
The various classes are:

1. navbar It is used to create a basic navigation bar that appears at the top of the web page.

Code:

2. navbar-brand Navbar-brand is employed to draw attention to a brand, major project, or page logo.

Code:

3. Navbar with form (.form-inline) To include form controls in the navigation bar at the top of the webpage, use the navbar with form attribute.

Code:

4. navbar-text It is used to insert centered text with vertical and horizontal spacing.

Code:

5. navbar-dark bg-dark It is used to add a navigation bar with the dark background. Other classes can be used to style the navbar such as primary, secondary, success, light, warning, danger, and info.

Code:

6. navbar-light It is used to create a navigation bar with light background.

Code:

7. navbar fixed-top It is used to create a navigation bar that is fixed at the top of the webpage.

Code:

8. navbar fixed-bottom It is used to create a navigation bar that is fixed at the bottom of the webpage.

Code:

9. navbar sticky-top Sticky navbars are navigational bars that sticks at the top of the page as you scroll down.

Code:

10. collapse and .navbar-collapse It is used to create collapsible navigation bars.

Code:

11. navbar-toggler Expand/collapse functionality for the navbar is added using the .navbar-toggler class.

Code:

12. navbar-expand-*(-sml -mdl -lgl -xl) It is used to create responsive collapsible navbars with the specified breakpoint.

Code:

Tables

Bootstrap tables allows you to gather a lot of data and present it in a logical manner.
To create tables and style them , use the following bootstrap classes.

1. table It is used for creating a basic table.

Code:

2. thead-light It is used to provide a light background to the table header.

Code:

3. thead-dark It is used to provide a dark background to the table header.

Code:

4. table-striped It is used to create an alternate dark and light zebra stripes like table background.

Code:

5. table-bordered It is used to add borders to all the cells and outlines of the table.

Code:

6. table-borderless It is used to remove the borders from all the cells and table sides.

Code:

7. table-hover The .table-hover class is used to create a hover state effect on the table rows.

Code:

8. table-sm It is used to create a small sized table. It will reduce the size of the table by minimizing the cell padding to half.

Code:

9. table-*-responsive

It is used to make a table responsive by reducing a large table by making it horizontally scrollable.There are multiple breakpoints that can be specified , like sm,md,lg or xl.

Code:

10. table-primary It is a styling attribute that adds a blue background to the table row.

Code:

11. table-secondary It is a styling attribute that adds a grey background to the table row.

Code:

12. table-success It is a styling attribute that adds a green background to the table row.

Code:

13. table-info It is a styling attribute that adds a light blue background to the table row.

Code:

14. table-danger It is a styling attribute that adds a red background to the table row.

Code:

15. table-light It is a styling attribute that adds a light background to the table row.

Code:

16. table-dark It is a styling attribute that adds a dark(grey/black) background to the table row.

Code:

Border Utilities

Using border utilities, you can quickly style an element's border and border-radius. These work well for images, buttons, and other elements.
The various classes are:

1. border It is used to add a border.

Code:

2. border-*-0 It represents no border. Variations-border-top-0 represents no top border; similarly, bottom, right, and left borders are possible.

Code:

3. border-* It lets you add/remove borders on a side and change the colour of the borders. border-(light, dark primary, secondary, transparent, white, warning, success, info, danger, 0, top-0, right-0, left-0, bottom-0).

Code:

4. rounded It refers to the rounded image border.

Code:

5. rounded-sm The .rounded-sm class refers to small rounded edges. Code:

6. rounded-lg The .rounded-lg class refers to large rounded edges.

Code:

7. rounded-circle The .rounded-circle class is used to add a rounded circular image.

Code:

8. rounded-0 The .rounded-0 class refers to no(zero) rounding (sharp edges).

Code:

Display

With the help of display utilities, we can quickly and responsively adjust the display value of components and more.
The various classes are:

1. d-*-block

It is used to display a block with custom styling.

Code:

2. d-*-flex

It is used to display flex items in a specific manner.

Code:

3. d-*-inline

It refers to inline display with a specific styling.

Code:

4. dinline-block

It is used to display an inline-block.

Code:

5. d-*-inline-flex It is used to add styling to inline flexbox.

Code:

6. d-*-none It is used to hide certain elements from display.

Code:

7. d-*-table It is used to display styling for the table.

Code:

8. d-*-table-cell It is used to add styling to a table cell.

Code:

9. d-print-... It controls how elements must be displayed during printing. None, block, inline, inline-block, table, table-row, table-cell, flex, and inline-flex are all valid values.

Code:

Colors

To convey meaning through colour, use a few colour utility classes. Link styling with hover states is also supported.
The various classes are:

1. bg-primary It is used to add a blue background.

Code:

2. bg-secondary It is used to add a grey background.

Code:

3. bg-success It is used to add a green background.

Code:

4. bg-info It is used to add a light blue background.

Code:

5. bg-warning It is used to add a yellow background.

Code:

6. bg-danger It is used to add a red background.

Code:

7. bg-light It is used to add a light (white or light grey) background.

Code:

8. bg-dark It is used to add a black (dark) background.

Code:

9. bg-white It is used to add a white background.

Code:

10. text-* The text is coloured differently. There are several values: primary, secondary, information, success, danger, warning, white, light, and dark.

Code:

Sizing

Using width and height utilities, you can easily make an element the same size as its parent.
The various classes are:

1. w-* A utility class that makes an element's width a percentage of its parent's width.

Code:

2. h-* It provides customized height for the div tag.

Code:

3. mw-* It provides a maximum width.

Code:

4. mh-* It provides maximum height.

Code:

Spacing

To change the appearance of an element, Bootstrap includes a variety of shorthand responsive margin, padding, and gap utility classes.
The various classes are:

1. m-1 / m-*-# Div tags with a margin on all sides; star ranges from 0 to 6 spaces.

Code:

2. mt-1 / mt-*-# Adds margin on top.

Code:

3. mr-1 / mr-*-# Adds margin on right.

Code:

4. mb-1 / mb-*-#

Adds a bottom margin.

Code:

5. ml-1 / ml-*-# Adds a left margin.

Code:

6. mx-1 / mx-*-# Adds left and right (x-axis) margin.

Code:

7. my-1 / my-*-# Adds top and bottom (y-axis) margins.

Code:

8. m-n1 / m-*-n# Negative spacing can be any of the above – left, right, top, bottom, x, y.

Code:

9. p-1 / p-*-# Adds padding on all sides.

Code:

10. pt-1 / pt-*-# Adds padding on the top.

Code:

11. pr-1 / pr-*-# Adds padding on the right.

Code:

12. pb-1 / pb-*-# Adds padding on the bottom.

Code:

13. pl-1 / pl-*-# Adds padding on the left.

Code:

14. px-1 / px-*-# Adds padding on the left and right (x-axis).

Code:

15. py-1 / py-*-# Adds padding on top and bottom (y-axis).

Code:

FlexBox

The main difference between Bootstrap 3 and Bootstrap 4 and 5 is that Bootstrap 5 now handles layout with flexbox rather than floats.
Bootstrap 5 have some classes to let us use Flexbox easily.They are:

1. flex-*-column It is used to display content vertically (top to bottom) using a flex column. Responsive variations are sm, md, lg, and xl.

Code:

2. flex-*-column-reverse It is used to reverse the order of display of columns.

Code:

3. flex-*-row-reverse It is used to reverse the order of the display of rows.

Code:

4. flex-*-nowrap Default setting to display text in the flex container.

Code:

5. flex-*-wrap It is used to add the wrap functionality. Responsive variations – sm, ml, lg, xl.

6. flex-*-wrap-reverse It is used to reverse order display.

Code:

7. flex-*-fill It is used to fill the background with different colors—primary, secondary, info, etc.

Code:

8. flex-*-grow-1 It lets the specified element take up the entire available space.

Code:

9. flex-*-grow-0 It Does not let the items grow on different screens.

Code:

10. flex-*-shrink-1 It lets the item shrink.

Code:

11. flex-*-shrink-0 No shrinking on different screens.

Code:

12. justify-content-*-start It is used to change the alignment of the items (justify to the left).

Code:

13. justify-content-*-end It is used to justify to the end (right).

Code:

14. justify-content-*-center Center justify the items.

Code:

15. justify-content-*-between Used to justify between the items.

Code:

16. justify-content-*-around Used to justify space around the items.

Code:

17. align-content-*-start Control vertical alignment to start (default).

Code:

18. align-content-*-end It is used to align content to end.

Code:

19. align-content-*-start It Controls the vertical alignment to start (default).

Code:

20. align-content-*-center It is used to align content to the center.

Code:

21. align-content-*-around It is used to align space around items.

Code:

22. align-content-*-stretch Used to stretch individual flexbox items.

Code:

23. align-items-*-baseline Used to align-items to baseline.

Code:

24. align-items-*-stretch Used to stretch items to the full width of the flex container.

Code:

25. align-self-*-start Self-align individual flex items to start (default).

Code:

26. align-self-*-end Self-align individual flex items to the end.

Code:

27. align-self-*-center Self-align individual flex items to the centre.

Code:

28. align-self-*-baseline Self-align individual flex item to baseline.

Code:

29. align-self-*-stretch Stretch to full width

Code:

30. order-*-# Used to change the order of display of particular flex items from 0-12.

Code:

Conclusion

This Bootstrap Cheat Sheet provides you with a complete overview of Bootstrap, its uses, features, and various components.
All the components are listed in this article along with their implementation codes.
For a better understanding of all the components of bootstrap and their functionalities, implement the codes on your own by taking reference from this bootstrap cheat sheet.
If you are a beginner or a professional, and want to create beautiful websites using bootstrap, this is the right place to start.
For a detailed understanding of Bootstrap and its components, visit this official documentation.