back to course
Lesson 01 / 502%· free preview
Bootstrap 5 Basics1/32
BS5 Home
Bootstrap 5 is the world's most popular front-end CSS framework — pre-built components, utility classes, and a powerful 12-column grid.
What is Bootstrap 5?
A free CSS + JS framework for building responsive, mobile-first websites. v5 dropped jQuery and ships as vanilla JS.
Why use it?
- Hundreds of ready-to-style components (buttons, navbars, cards, modals…)
- Mobile-first 12-column grid out of the box
- 700+ utility classes for margin, padding, color, flex, grid, display
- Themeable via CSS variables + Sass
What's new in v5 (vs v4)?
- No jQuery — vanilla JS only
- Switched to CSS variables (
--bs-primary, etc.) - New utility API + RTL support
- Dropped IE 10/11
- New
Offcanvasand refreshedToast,Tooltip,Popover
Real-life Example
Bootstrap powers the admin panels of GitHub, NASA's open-data sites, and ~25% of the top-100k websites. Twitter built it for internal tooling, then open-sourced it in 2011.
Important. Bootstrap 5 dropped jQuery — load only
bootstrap.bundle.min.js(vanilla JS + Popper).
Key Takeaways
- Free, open-source CSS framework — MIT license
- Mobile-first, 12-column responsive grid
- Includes a component library (buttons, modals, navbar, …) and utility classes
- Bootstrap 5 = no jQuery; targets evergreen browsers + IE drop
Interview Questions
Practice Questions
- Add Bootstrap 5 to a blank HTML page via CDN — load CSS in
<head>, JS bundle before</body>. - Create a button using only Bootstrap classes (
btn btn-primary). - List 3 advantages and 3 disadvantages of using Bootstrap.
Pro Tips
- Always link Bootstrap CSS in
<head>, JS bundle right before</body>for fastest paint. - Use the CDN during prototyping — switch to npm + Sass in production for tree-shaking.
- Bookmark
getbootstrap.com/docs— it's the single source of truth.
AI-powered recap
Quick recap quiz?
We'll generate 5 MCQs from this lesson and check your understanding instantly. Takes ~30 seconds.
Ready to move on?
// feedback.matters()
Did this lesson help you?