Bootstrap Introduction
Bootstrap is a free front-end framework for building responsive, mobile-first websites quickly.
What is Bootstrap?
- Bootstrap is a big, ready-made set of CSS and a little JavaScript
- You use it by adding its classes to your HTML elements
- It is responsive: pages adjust to phones, tablets and laptops
- It is free and open source, first made by two developers at Twitter in 2011
This tutorial teaches Bootstrap 5, the current major version. It does not need jQuery.
What Bootstrap Gives You
| Part | What it is | Examples |
|---|---|---|
| Grid system | Rows and columns for page layout | container, row, col-md-6 |
| Components | Styled, ready-to-use parts | Buttons, cards, navbars, alerts, modals |
| Utilities | Small one-job classes | text-center, mt-3, bg-light, d-flex |
| JavaScript plugins | Interactive behaviour | Dropdowns, menus that open, pop-up modals |
Plain HTML vs Bootstrap
Here is a button and a message with no CSS at all:
Example
html
<!DOCTYPE html>
<html lang="en">
<body>
<button>Submit Form</button>
<p>Your admission form has been received.</p>
</body>
</html>The same HTML with Bootstrap classes:
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<button class="btn btn-primary">Submit Form</button>
<p class="alert alert-success mt-3">Your admission form has been received.</p>
</body>
</html>With two classes each, the button and the message look professional. We did not write any CSS.
Why Use Bootstrap?
- Saves time: common parts are already designed
- Mobile-first: the grid and components work on small screens
- Consistent: every page of your site looks like it belongs together
- Works everywhere: tested in all modern browsers
- Well documented: a big community and lots of themes and templates
Bootstrap sites can look alike if you never change the defaults. Change colours, fonts and spacing a little, and your website will have its own personality.
Bootstrap vs Tailwind CSS
| Bootstrap | Tailwind CSS |
|---|---|
Ready-made components (btn, card, navbar) | Small utilities you combine yourself |
| Very quick to get a clean result | More freedom, more design decisions |
| Includes JavaScript for menus and modals | No JavaScript components |
Both are popular. If you want to build a good-looking site fast, Bootstrap is a great first framework.
Exercise
Exercise
Which part of Bootstrap helps you arrange content in rows and columns?