Bootstrap Introduction
Bootstrap is a free and open source front end framework. It gives you ready made CSS and JavaScript parts, like a grid, buttons, forms, cards, menus and popups, so you can build a good looking responsive website quickly without writing all the CSS yourself.
It was started at Twitter in 2011 by Mark Otto and Jacob Thornton, for the internal tools of the company, and it became open source in the same year. Today it is one of the most used front end frameworks in the world.
Why use Bootstrap?
- Responsive and mobile first. Pages work on phones, tablets and big screens with the same code.
- Fast development. Many parts are ready, and you only add the class names.
- Consistent design. All the buttons, forms and menus look and work in the same style.
- Works in all modern browsers.
- Easy to learn. If you know basic HTML and CSS, you can start in one day.
- Customizable. You can change colors, sizes and fonts with CSS variables or Sass.
What is in Bootstrap?
| Part | What it gives you |
|---|---|
| Layout | Containers, a 12 column grid, breakpoints and utilities for spacing and flexbox |
| Content | Typography, images, tables, colors |
| Components | Buttons, alerts, cards, navbar, modals, carousel, accordion and more |
| Forms | Styled inputs, selects, switches, validation states |
| JavaScript | Plugins for the components, which work with simple data attributes |
| Utilities | Small helper classes for spacing, display, borders, shadows and text |
A first look
The code below makes a responsive three column section. On a phone the columns are stacked one under the other, on a big screen they are side by side. Resize the preview window (or open this page on a phone) to see it.
<div class="container">
<div class="row text-center">
<div class="col-12 col-md-4 mb-3"><div class="p-3 bg-primary-subtle border rounded">Column 1</div></div>
<div class="col-12 col-md-4 mb-3"><div class="p-3 bg-success-subtle border rounded">Column 2</div></div>
<div class="col-12 col-md-4 mb-3"><div class="p-3 bg-warning-subtle border rounded">Column 3</div></div>
</div>
</div>
Bootstrap versions
| Version | Notes |
|---|---|
| Bootstrap 5 (5.3.8) | The current stable version. No jQuery needed, has color modes (dark mode), offcanvas, RTL support. This tutorial is for Bootstrap 5.3 |
| Bootstrap 4 | Older version. Needs jQuery. Many old websites and themes still use it |
| Bootstrap 6 | In alpha (pre-release) at the time of writing, not for production sites |
If you use an old theme or template, check which version it uses before you copy examples. Class names changed between version 4 and 5. See Migrating from Bootstrap 4 to 5.
Bootstrap or something else?
Other frameworks like Tailwind CSS and Bulma are also popular. Bootstrap gives ready components with a standard look, and it is a very good choice for admin panels, business sites, prototypes and for learning. It is also used by many WordPress themes. You need only HTML and CSS knowledge to start.
What you will learn in this tutorial
- Set up Bootstrap, containers and the grid system.
- Typography, colors, images and tables.
- Buttons, alerts, cards, navs, navbar, forms and many other components.
- JavaScript components like modal, carousel, collapse and tooltips.
- Utilities, dark mode, icons, customization and a full page example.
| Exercises & Assignments |
|---|
| No Content Found. |