Bootstrap Introduction

Bootstrap is a free, open-source front-end toolkit: a large CSS file full of ready-made classes, plus an optional JavaScript file for interactive parts such as menus and pop-up dialogs. Instead of writing every style yourself, you add class names like btn btn-primary to your HTML and get a well-designed, responsive result straight away. This Bootstrap introduction, and the whole track, uses Bootstrap 5.3.8, the current version of Bootstrap 5.

You should already know basic HTML and CSS before starting this Bootstrap introduction. Bootstrap does not replace CSS; it is CSS that someone else has written and organised for you. When something looks wrong, your CSS knowledge is what helps you fix it. If you need a refresher, start with the HTML and CSS tracks.

Bootstrap introduction: what it gives you

Bootstrap was first built inside Twitter in 2011 to keep their internal tools consistent, and it was later released to everyone. Today it is maintained by a small open-source team and documented at getbootstrap.com. Version 5 removed the old dependency on jQuery and dropped Internet Explorer, so it is lighter and uses modern CSS such as Flexbox and custom properties.

Why learn Bootstrap (and when not to)

Bootstrap is popular because it saves time. A form, a navigation bar or a pricing-style card grid takes minutes instead of hours, and it already works on phones. The components follow sensible accessibility patterns, the documentation is excellent, and many company dashboards, admin panels and WordPress themes are built on it, so you will often meet it at work.

It is not always the right choice. Sites built with default Bootstrap can look alike, and the full CSS file includes many styles a small page never uses. For a highly custom brand design, plain CSS or a utility-first tool may suit you better. The post Bootstrap vs Tailwind CSS compares the two approaches.

Adding Bootstrap to a page

The quickest way to start is a CDN (content delivery network) link. You add one <link> in the <head> for the CSS. If you use interactive components, you also add one <script> just before </body>. The bootstrap.bundle.min.js file already includes Popper, the small library that positions dropdowns and tooltips.

Two more lines matter. The HTML5 doctype keeps the browser in standards mode, and the viewport meta tag tells phones to use the real screen width. Without the viewport tag, a phone pretends to be a wide desktop screen and Bootstrap’s responsive classes never switch to their mobile layout.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first Bootstrap page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container py-5">
  <h1>Vanakkam, Bootstrap!</h1>
  <p class="lead">This page uses only Bootstrap classes. No custom CSS has been written.</p>
  <p>The font, spacing and colours below come from the Bootstrap stylesheet.</p>
  <button type="button" class="btn btn-primary">Primary button</button>
  <button type="button" class="btn btn-outline-secondary">Secondary button</button>
</div>
</body>
</html>

How Bootstrap classes work

Most Bootstrap components use a base class plus modifier classes. The base class btn gives padding, a border radius and focus styles. A modifier such as btn-success adds the colour, and btn-lg changes the size. You combine them in the class attribute, separated by spaces, and the order does not matter.

Utility classes do one small job each. p-3 adds padding, rounded rounds the corners, shadow-sm adds a soft shadow and text-center centres text. Putting several together lets you style an element without leaving your HTML.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Combining component and utility classes</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container py-4">
  <div class="p-4 bg-body-tertiary border rounded-3 shadow-sm text-center">
    <h2 class="h4 mb-1">Priya Raman</h2>
    <p class="text-body-secondary mb-3">Front-end developer, Chennai</p>
    <button type="button" class="btn btn-success btn-sm">Follow</button>
    <button type="button" class="btn btn-outline-dark btn-sm">Message</button>
  </div>
</div>
</body>
</html>

Mobile-first breakpoints

Bootstrap is mobile-first. A class without a size applies to every screen width, starting from the smallest. A class with a breakpoint infix, such as text-md-start, applies from that breakpoint upwards. So text-center text-md-start means “centred on phones, left-aligned from medium screens up”.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Classes that change with screen width</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container py-4">
  <h2 class="text-center text-md-start">Pondicherry Book Club</h2>
  <p class="text-center text-md-start">Centred on small screens, left-aligned from 768px.</p>
  <p class="alert alert-info d-md-none">You are on a narrow screen (below 768px).</p>
  <p class="alert alert-success d-none d-md-block">You are on a medium or wider screen (768px and up).</p>
</div>
</body>
</html>

Resize the preview, or open it on your phone, and watch the alignment and the message change. You have just used responsive design without writing a single media query. Bootstrap’s stylesheet contains the media queries for you. To understand what happens underneath, read CSS Responsive Design.

What this track covers

After this Bootstrap introduction, the lessons build on each other. You will learn the grid, then typography, colours, spacing and other utilities, then the most-used components: buttons, cards, navbars, forms, tables, list groups, alerts and modals. The last two lessons cover Flexbox utilities and how to customise Bootstrap with CSS variables, Sass and dark mode. Every example has a Try it Yourself button, so change the classes and see what happens.

Further reading

• getbootstrap.com/docs/5.3/getting-started/introduction
• getbootstrap.com/docs/5.3/layout/breakpoints
• getbootstrap.com/docs/5.3/migration
• getbootstrap.com/docs/5.3/content/reboot