Bootstrap 5 Complete Cheat Sheet for Beginners | 300+ Classes & Components Explained

Hello friends! 👋

If you're learning HTML, CSS, and Web Development, then Bootstrap 5 is one of the most valuable frameworks you can master. It allows you to build beautiful, responsive, and mobile-friendly websites much faster without writing large amounts of CSS from scratch.

Whether you're creating a personal portfolio, business website, admin dashboard, landing page, blog, or e-commerce site, Bootstrap provides hundreds of ready-to-use classes and components that simplify web development.

However, beginners often struggle to remember class names like container, row, col, d-flex, justify-content-center, navbar, accordion, modal, offcanvas, and many more.

That's where this complete Bootstrap 5 cheat sheet comes in.

Instead of searching the internet every time, you can bookmark this guide and quickly find the Bootstrap class or component you need.

---

💡 My Experience

When I first started learning Bootstrap, I spent more time searching for class names than actually building websites. I could remember how a component looked, but not the exact class needed to create it.

After working on multiple web projects and teaching Bootstrap in computer labs, I created my own reference sheet containing the most commonly used classes. It saved a lot of development time and helped me understand how different Bootstrap utilities work together.

This article is designed with the same goal—to provide a practical reference that beginners can return to whenever they need it.

---

What is Bootstrap 5?

Bootstrap 5 is a free and open-source front-end CSS framework developed to make responsive web development easier.

It provides:

• Responsive Grid System

• Ready-made UI Components

• Utility Classes

• Flexbox Utilities

• Forms

• Navigation

• Typography

• JavaScript Components

• Icons (via Bootstrap Icons)

Bootstrap 5 no longer depends on jQuery, making websites faster and easier to maintain.

---

Why Use Bootstrap?

Bootstrap helps you:

• Build websites faster.

• Create responsive layouts.

• Reduce CSS writing.

• Maintain consistent designs.

• Support multiple screen sizes.

• Develop professional interfaces quickly.

---

Before You Start

To use Bootstrap 5:

• Basic knowledge of HTML.

• Basic CSS understanding.

• A code editor (such as VS Code).

• Bootstrap CSS and JavaScript files (via CDN or local installation).

---

1. Layout Classes

Class	Purpose
container	Fixed-width container
container-fluid	Full-width container
container-sm	Small responsive container
container-md	Medium container
container-lg	Large container
container-xl	Extra large container
container-xxl	XXL container

---

2. Grid System

Class	Purpose
row	Creates a row
col	Auto-width column
col-1 to col-12	Fixed columns
col-sm-*	Small screens
col-md-*	Medium screens
col-lg-*	Large screens
col-xl-*	Extra large screens
g-0 to g-5	Gutters
gx-*	Horizontal spacing
gy-*	Vertical spacing

---

3. Display Utilities

Class
d-none
d-block
d-inline
d-inline-block
d-flex
d-grid
d-table

Responsive versions:

• d-sm-*

• d-md-*

• d-lg-*

• d-xl-*

• d-xxl-*

---

4. Flexbox Utilities

Common classes:

• d-flex

• flex-row

• flex-column

• flex-wrap

• justify-content-start

• justify-content-center

• justify-content-end

• justify-content-between

• justify-content-around

• align-items-start

• align-items-center

• align-items-end

• align-self-center

• order-1

• order-last

---

💡 My Recommendation

Instead of memorizing every Bootstrap class, first understand the purpose of each utility category—such as layout, spacing, typography, and flexbox. Once you know what you want to achieve, remembering the class names becomes much easier.

---

5. Spacing Utilities

Margin:

• m-0

• m-1

• m-2

• m-3

• m-4

• m-5

Padding:

• p-0

• p-1

• p-2

• p-3

• p-4

• p-5

Directional spacing:

• mt-*

• mb-*

• ms-*

• me-*

• mx-*

• my-*

• pt-*

• pb-*

• ps-*

• pe-*

• px-*

• py-*

---

6. Typography

Common typography classes:

• h1 to h6

• display-1 to display-6

• lead

• fw-bold

• fw-normal

• fw-light

• fst-italic

• text-decoration-none

• text-uppercase

• text-lowercase

• text-capitalize

• text-break

---

7. Text Colors

• text-primary

• text-secondary

• text-success

• text-danger

• text-warning

• text-info

• text-light

• text-dark

• text-muted

• text-white

---

8. Background Colors

• bg-primary

• bg-success

• bg-danger

• bg-warning

• bg-info

• bg-secondary

• bg-dark

• bg-light

• bg-body

• bg-transparent

---

9. Buttons

Common button classes:

• btn

• btn-primary

• btn-secondary

• btn-success

• btn-danger

• btn-warning

• btn-info

• btn-dark

• btn-light

• btn-outline-primary

• btn-lg

• btn-sm

---

10. Forms

Useful classes:

• form-control

• form-label

• form-select

• form-check

• form-check-input

• form-check-label

• form-floating

• input-group

• input-group-text

• form-text

---

11. Tables

• table

• table-striped

• table-bordered

• table-hover

• table-dark

• table-responsive

• table-success

• table-danger

• table-warning

---

12. Navigation Components

Bootstrap provides ready-to-use navigation components:

• Navbar

• Nav

• Tabs

• Pills

• Breadcrumb

• Pagination

Common classes:

• navbar

• navbar-brand

• navbar-nav

• nav-item

• nav-link

• navbar-toggler

• collapse

• breadcrumb

• pagination

---

13. Cards

Useful classes:

• card

• card-header

• card-body

• card-footer

• card-title

• card-text

• card-img-top

• card-group

---

14. Alerts

• alert

• alert-primary

• alert-success

• alert-warning

• alert-danger

• alert-dismissible

---

15. Badges

• badge

• bg-primary

• rounded-pill

---

16. Modals

Common classes:

• modal

• modal-dialog

• modal-content

• modal-header

• modal-body

• modal-footer

---

17. Offcanvas

Classes:

• offcanvas

• offcanvas-start

• offcanvas-end

• offcanvas-top

• offcanvas-bottom

• offcanvas-header

• offcanvas-body

---

18. Accordion

Classes:

• accordion

• accordion-item

• accordion-header

• accordion-button

• accordion-collapse

• accordion-body

---

19. Carousel

Classes:

• carousel

• carousel-item

• carousel-indicators

• carousel-control-prev

• carousel-control-next

• carousel-caption

---

20. Other Popular Components

Bootstrap also includes:

• Dropdown

• Collapse

• Toast

• Spinner

• Progress Bar

• List Group

• ScrollSpy

• Tooltip

• Popover

• Placeholder

• Close Button

• Ratio

• Position Utilities

• Visibility Utilities

• Borders

• Shadows

• Rounded Corners

Together, these categories contain 300+ commonly used classes and components, making Bootstrap a powerful framework for building responsive websites.

---

⚠️ Note

Bootstrap provides many utility classes, but avoid using unnecessary classes on every element. Combining Bootstrap with clean, semantic HTML makes your code easier to read, maintain, and debug.

---

Quick Summary Table

Category	Examples
Layout	container, row, col-*
Display	d-flex, d-grid
Flexbox	justify-content-*, align-items-*
Spacing	m-*, p-*
Typography	fw-bold, lead
Colors	text-*, bg-*
Buttons	btn-*
Forms	form-control, input-group
Tables	table, table-striped
Components	Navbar, Card, Modal, Carousel, Accordion, Offcanvas

---

Common Beginner Mistakes

Avoid these mistakes:

• Forgetting to include the Bootstrap CSS and JavaScript files.

• Mixing custom CSS with Bootstrap without understanding specificity.

• Ignoring the responsive grid system.

• Overusing utility classes on every element.

• Forgetting to test layouts on mobile devices.

• Using outdated Bootstrap 4 examples in Bootstrap 5 projects.

• Not learning the grid system before using advanced components.

---

Interesting Facts

• Bootstrap was originally developed at Twitter.

• Bootstrap 5 removed the dependency on jQuery.

• The framework uses a mobile-first responsive design approach.

• Thousands of websites and admin dashboards are built with Bootstrap.

• Learning Bootstrap makes it easier to understand other modern CSS frameworks.

---

Best Practices

• Learn the Grid System before advanced components.

• Build responsive layouts from the beginning.

• Use utility classes to reduce custom CSS where appropriate.

• Keep Bootstrap updated to the latest stable version.

• Combine Bootstrap with semantic HTML and accessibility best practices.

---

Conclusion

Bootstrap 5 is one of the fastest ways to build responsive, professional-looking websites. By understanding its layout system, utility classes, and reusable components, you can significantly reduce development time while maintaining clean and consistent designs.

Rather than memorizing every class, focus on understanding the purpose of each category. With regular practice, you'll naturally remember the most commonly used classes and become much more productive in your web development projects.

---

Frequently Asked Questions (FAQs)

1. What is Bootstrap 5?

Bootstrap 5 is a free, open-source front-end framework used to create responsive and mobile-friendly websites quickly.

2. Do I need to know CSS before learning Bootstrap?

Yes. Basic knowledge of HTML and CSS will help you understand how Bootstrap classes work and when to use them.

3. Does Bootstrap 5 require jQuery?

No. Bootstrap 5 removed its dependency on jQuery and uses modern JavaScript instead.

4. What is the Bootstrap Grid System?

The Grid System is a responsive layout system based on rows and columns that adapts to different screen sizes.

5. Are Bootstrap classes responsive?

Many Bootstrap classes include responsive variants for different screen sizes, allowing layouts to adjust automatically.

6. Can I customize Bootstrap?

Yes. You can customize Bootstrap using your own CSS or by modifying its Sass source files.

7. Is Bootstrap still worth learning in 2026?

Absolutely. Bootstrap remains one of the most widely used CSS frameworks for beginners, professionals, rapid prototyping, and responsive web development.

---

📥 Download PDF

⚠️ If the above link is not working, downloading slowly, or showing any error, please use our high-speed backup link below:

⚡ Alternative Download Link (MirrorAd)

---

Complete Video Guide/Tutorial

👉 Subscribe to CodeSardar Now!