Introduction
Until now, you have learned pure CSS. Now we move to Bootstrap, a framework that sits on top of CSS and helps developers build interfaces faster.
In this chapter, you will learn:
- What Bootstrap is and why it was created.
- The difference between pure CSS and Bootstrap.
- Essential concepts: The Grid System, Utilities, and Components.
- When to use Bootstrap (and when to avoid it).
1. What is Bootstrap?
Bootstrap is a front-end framework that provides pre-written CSS classes, a responsive grid system, and ready-made UI components.
2. Bootstrap vs. Pure CSS
Bootstrap doesn't replace CSS; it standardizes it. Here's a quick comparison:
| Pure CSS | Bootstrap |
|---|---|
| You write every style manually. | You use pre-defined classes. |
.btn { padding: 10px; background: blue; ... } | <button class="btn btn-primary"> |
| Full control, slower development. | Less control, rapid development. |
3. Core Concepts
The Grid System
Bootstrap divides the screen into 12 columns. You declare your layout intent using classes like col-6 (50% width) or col-4 (33% width).
Utility Classes
Classes for common CSS properties to save you from writing custom rules.
.text-center→text-align: center;.mt-3→margin-top: 1rem;.d-flex→display: flex;
Components
Ready-to-use UI elements like Navbars, Cards, Modals, and Carousels.
4. When to Use Bootstrap?
Use it when:
- You need to build an MVP or internal tool quickly.
- You want a consistent, clean design without a designer.
- You are working on a team that needs a shared system.
Avoid it when:
- You need a highly unique, custom-branded website.
- You need absolute minimal file size (Bootstrap is heavy).
- You are trying to learn how CSS layout really works.
Chapter Summary
In this chapter, you learned:
- Bootstrap is a tool for speed and consistency, not a replacement for CSS knowledge.
- It uses a 12-column grid system and utility classes.
- It is widely used in the industry for admin panels and dashboards.
Next, we will set up Bootstrap in your project and start building.