Bootstrap layers Reboot (normalized base styles), a 12-column flexbox grid, component rules, and optional JavaScript plugins that attach to data attributes like data-bs-toggle="dropdown".
What loads in the browser
- CSS bundle — grid, utilities, components, and CSS variables for theming
- JS bundle — Popper-powered positioning plus interactive widgets (modals, dropdowns, collapse)
- Your markup — semantic HTML plus Bootstrap class names; no build step required for learning
The playground uses CDN links for convenience. Production Laravel apps often install via npm, import only needed Sass partials, and tree-shake or customize variables before compile.
Important interview questions and answers
- Q: What is Reboot?
A: Bootstrap’s opinionated CSS reset/normalize layer that gives consistent typography and form defaults before components apply. - Q: Why does Bootstrap 5 drop jQuery?
A: Modern vanilla JS and smaller bundles; plugins use native DOM APIs while keeping data-attribute initialization. - Q: CDN vs npm?
A: CDN is fine for prototypes and lessons; npm + Sass gives variable overrides, partial imports, and version pinning in CI.
Self-check
- What does the JavaScript bundle add that CSS alone cannot?
- Why might a production app compile Bootstrap from source instead of linking CDN CSS?
Interview prep
- What does the JS bundle provide?
Plugins (dropdown, modal, collapse, etc.) built on shared data API attributes and Popper for positioning.