Skip to content
Chapter 01 of 04 · 3 lessons · ~27 min

Bootstrap Basics

Choose between Bootstrap and Tailwind, add Bootstrap to a page and master its grid system.

YOUR PROGRESS0%
/ Lessons in this chapter
01
Bootstrap vs Tailwind CSS: Which Should You Learn? How Bootstrap and Tailwind differ in philosophy and practice, and how to pick the right one for a project. Coming soon
02
How to Add Bootstrap to Your Website How to add Bootstrap to an HTML page with the CDN or npm, and confirm everything works. Coming soon
03
Bootstrap Grid System Explained How to build responsive layouts with Bootstrap's containers, rows, columns and breakpoints. Coming soon

Chapter practice task

Task: Build a responsive three-section page with the Bootstrap grid

  1. Create an HTML page and add Bootstrap with the CDN.
  2. Build a hero with text and an image in two columns that stack on mobile.
  3. Build a three-column features row that becomes one column on phones.
  4. Build a footer with two columns.

By the end of this chapter

  • You can explain when Bootstrap or Tailwind is the better choice
  • You can add Bootstrap to any HTML page
  • You can build responsive layouts with containers, rows and columns

Quick answers for this chapter

Is Bootstrap outdated?

No. It’s mature and widely used, especially for admin panels, business sites and teams that want ready-made components.

Do I need jQuery for Bootstrap 5?

No. Bootstrap 5 dropped jQuery and uses plain JavaScript.

How many columns does the Bootstrap grid have?

Twelve per row, at every breakpoint.