Bootstrap
The most widely used CSS component framework.
CurrentbeginnerBeginner-friendlyGuide only -- no course yet
Overview
Bootstrap is a CSS (and optional JavaScript) framework providing a responsive grid system and a large set of pre-styled components (navbars, modals, forms, buttons). It remains extremely common in existing production codebases and quick prototyping, even as utility-first approaches have gained ground.
- What it is
- A CSS framework offering a 12-column responsive grid and ready-made UI components.
- Why it's used
- It lets a team ship a consistent, responsive UI fast without designing every component from scratch.
- Where it fits
- Directly in server-rendered or lightly-interactive sites; less common (but not absent) in modern component-framework (React/Vue) codebases that prefer utility CSS or their own design system.
Core concepts
- The 12-column grid
- Component classes (navbar, card, modal)
- Responsive breakpoint utilities
- Customizing via Sass variables
Example
The row/col-md-6 pattern is Bootstrap's grid: two equal-width columns on medium screens and up, stacking on smaller screens automatically.
<div class="container">
<div class="row">
<div class="col-md-6">Left</div>
<div class="col-md-6">Right</div>
</div>
</div>Common use cases
- Admin dashboards
- Rapid prototypes
- Marketing sites that need a consistent look fast
Project ideas
- A responsive dashboard layout using Bootstrap's grid and card components