Bootstrap Cheatsheet for Learners

What is Bootstrap?

Bootstrap is an open-source CSS Framework developed by Twitter engineers in 2011. It helps developers quickly build responsive, mobile-first websites by providing ready-made CSS classes, a grid system, and reusable UI components like buttons, navbars, forms, and modals.

Key Features: Responsive Grid System • Prebuilt Components • Extensive Utility Classes • Browser Compatibility

How to apply Bootstrap (Step-by-Step)

Open Bootstrap website
Open your browser and go to getbootstrap.com. Click Get started (or Download) to see the recommended CDN links.
Copy the CDN links
On the “Get started” page you'll find two main pieces: the CSS link and the JS bundle. Copy both. (Example links shown below — replace the version if the website shows a newer one.)
Paste into your HTML
Place the <link> (CSS) inside the <head> of your page. For best performance, place the JS bundle right before the closing </body>. Example:

                                <!-- Put this inside <head> -->

                                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
                                rel="stylesheet"> 

                                <!-- Put this before </body> (recommended) -->

                                <script
                                src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Alternative: If you must paste both links into <head>, the page will still work but placing scripts at the end of the body is a better practice for faster page rendering.

Quick verification (copy this into your HTML body)

After adding the links, paste this snippet somewhere inside the <body> to check:

                                    <button class="btn btn-primary">Bootstrap is working
                                

If you see a blue styled button, Bootstrap is correctly applied.

Pro tips:

Use the official site to copy the latest CDN (versions change).
If you want icons, add https://cdn.jsdelivr.net/npm/bootstrap-icons@version/font/bootstrap-icons.css or use any icon library.
For production, consider using SRI (integrity) and crossorigin attributes if provided by the CDN provider.

Grid System

Bootstrap's grid system uses containers, rows, and columns to layout and align content.

Class	Purpose
.container	Fixed width container that centers content
.container-fluid	Full width container
.row	Horizontal group of columns
.col	Equal width column
.col-{breakpoint}-{size}	Responsive column (breakpoint: sm, md, lg, xl, xxl)

Example:

.col-md-4

Typography & Text Utilities

Text Alignment:

.text-start - Left aligned text
.text-center - Center aligned text
.text-end - Right aligned text

Font Weight:

.fw-bold - Bold text
.fw-normal - Normal weight text
.fw-light - Light weight text

Text Colors:

.text-primary .text-success .text-danger .text-warning .text-info .text-muted

Example:

This is bold text (.fw-bold)

This text is centered and red (.text-center, .text-danger)

This text is green (.text-success)

Utility Classes

Spacing Utilities:

Format: {property}{sides}-{size}

Properties:

m - margin
p - padding

Sides:

t - top
b - bottom
l - left
r - right
x - left & right
y - top & bottom
blank - all sides

Sizes:

0 - 0rem
1 - 0.25rem
2 - 0.5rem
3 - 1rem
4 - 1.5rem
5 - 3rem

Example:

.m-2 .p-2 (margin: 0.5rem, padding: 0.5rem)

.mt-4 .mb-3 .ps-5 (margin-top: 1.5rem, margin-bottom: 1rem, padding-left: 3rem)

Buttons

Button Styles:

.btn-primary .btn-secondary .btn-success .btn-danger .btn-warning .btn-info .btn-light .btn-dark

Button Sizes:

.btn-lg .btn-sm

Outline Buttons:

.btn-outline-primary .btn-outline-secondary .btn-outline-success .btn-outline-danger

Example:

Alerts

Provide contextual feedback messages for typical user actions.

Alert Styles:

.alert-primary .alert-success .alert-danger .alert-warning .alert-info .alert-light .alert-dark

Example:

This is a warning alert!

This is an info alert!

Forms

Form Classes:

Class	Purpose
.form-control	Styles form inputs
.form-label	Styles form labels
.form-select	Styles dropdown selects
.form-check	Styles checkboxes and radios
.mb-2, .mb-3	Margin bottom utilities for spacing

Example:

Images

Image Classes:

Class	Purpose
.img-fluid	Makes images responsive
.rounded	Adds rounded corners
.rounded-circle	Makes image circular
.img-thumbnail	Adds a border and padding

Example:

img-fluid makes image responsive, rounded adds rounded corners.

References