Introduction
What is Bootstrap?
Bootstrap is the world's most popular open-source CSS framework, created by Twitter in 2011. It gives developers a ready-made library of CSS and JavaScript components — buttons, navbars, modals, cards, forms — that work responsively across all screen sizes.
Instead of writing hundreds of lines of CSS from scratch, Bootstrap lets you apply utility classes and component classes directly in HTML. Load it instantly via CDN:
Instead of writing hundreds of lines of CSS from scratch, Bootstrap lets you apply utility classes and component classes directly in HTML. Load it instantly via CDN:
<link rel="stylesheet" href="bootstrap.min.css">
Core System
The 12-Column Grid
Bootstrap divides every row into 12 equal columns. Assign column widths using classes like
col-4 (4 of 12 = ⅓ width). Breakpoint prefixes make layouts responsive without custom CSS:
Bootstrap Grid ExampleBootstrap 5
123456789
<!-- Mobile to desktop responsive grid -->
<div class="container">
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4">Column 1</div>
<div class="col-12 col-md-6 col-lg-4">Column 2</div>
<div class="col-12 col-md-12 col-lg-4">Column 3</div>
</div>
</div>
Interactive Demo
Build Your Own Grid
Adjust the controls to see how Bootstrap's grid system responds:
Live Grid Builder
Columns
Breakpoint
Gutter
Components
Bootstrap Components
Real Bootstrap 5 components rendered from the CDN. Click through to explore:
Bootstrap Component Demos
Frontend
HTML & CSS
Structure and style of web pages.
Backend
PHP & MySQL
Server logic and data management.
JavaScript
DOM & Events
Dynamic behaviour and interactivity.
Classes: card card-header card-body card-title card-text border-primary
📘 Info: Bootstrap includes 8 contextual alert styles.
✅ Success! Form submitted successfully.
⚠️ Warning: This action cannot be undone.
❌ Error: Connection to database failed.
HTML
CSS
JS
Bootstrap
PHP
MySQL
Bootstrap modals are triggered with data attributes:
Bootstrap CDN bundle handles all modal behaviour automatically.
Utilities
Bootstrap Utility Classes
Hover any utility class to see its CSS equivalent:
Hover to Explore Utilities
Hover a class above to see its CSS output
Comparison
Bootstrap vs Custom CSS
| Scenario | Bootstrap | Custom CSS |
|---|---|---|
| Speed of prototyping | ✔ Very fast | ✘ Slower |
| Pixel-perfect control | ✘ Constrained | ✔ Full control |
| Cross-browser consistency | ✔ Built-in | ~ Manual effort |
| CSS file size | ✘ ~22KB min | ✔ As needed |
| Responsive grid | ✔ 12-col built-in | ~ Write yourself |
| Component library | ✔ 30+ components | ✘ Build from scratch |
| Learning curve | ✔ Shallow (class-based) | ~ Requires deep CSS |