Learn Bootstrap
Bootstrap 5 is the world's most popular open-source framework for building responsive, mobile-first websites quickly. Instead of writing CSS from scratch, you drop in ready-made classes for layout, buttons, forms, and dozens of components. In this lesson you will learn what Bootstrap is, why developers reach for it, and exactly how to add it to a page so you can start building right away.
What is Bootstrap?
Bootstrap is a front-end toolkit made up of pre-written CSS and JavaScript. You attach its classes to your HTML elements, and the framework handles the styling and responsive behavior for you. That means a beginner can produce a clean, professional-looking page in minutes without deep CSS knowledge.
The current major version is Bootstrap 5. Compared to older versions, it drops the jQuery dependency, ships its own lightweight JavaScript, and adds an expanded set of utility classes for spacing, colors, and flexbox.
Why use Bootstrap?
- Speed: reusable components let you build interfaces fast.
- Responsive by default: layouts adapt to phones, tablets, and desktops automatically.
- Consistency: every button, card, and form shares the same polished look.
- Huge community: plenty of documentation, examples, and third-party themes.
- Customizable: override the default styles or compile your own version with Sass.
Adding Bootstrap with a CDN
The fastest way to try Bootstrap is to link to it from a CDN (Content Delivery Network). Add the CSS link inside the <head> and the JavaScript bundle just before the closing </body> tag.
Starter template using the Bootstrap 5 CDN
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-center text-primary">Hello, Bootstrap!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Trying your first component
Once Bootstrap is linked, you can use any of its classes immediately. Here a plain link becomes a styled button just by adding two classes.
A styled button with utility classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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>
<a href="#" class="btn btn-success">Get Started</a>
<button type="button" class="btn btn-outline-primary">Learn More</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Exercise: Bootstrap Introduction
What is Bootstrap primarily used for?
Frequently Asked Questions
- Should I learn CSS before Bootstrap?
- Yes. Bootstrap is a layer of prewritten CSS, and without understanding the box model, flexbox and specificity you will not know why a layout breaks or how to override a class. A week of CSS fundamentals makes Bootstrap far easier.
- Is Bootstrap still relevant?
- For internal tools, admin panels, prototypes and anything that needs to look reasonable quickly, yes. For distinctive product design, teams increasingly reach for Tailwind or write their own CSS, because Bootstrap sites tend to look like Bootstrap sites.
- What is the difference between Bootstrap and Tailwind?
- Bootstrap ships finished components: a navbar, a card, a modal, styled and ready. Tailwind ships utility classes you compose into your own components. Bootstrap gets you further faster; Tailwind gives you more control over the result.
