Bootstrap Tutorial

Bootstrap is a free CSS framework full of ready-made, responsive building blocks: a grid for layouts, plus buttons, cards, navigation bars, forms and much more.

Instead of writing all your CSS by hand, you add Bootstrap's classes to your HTML, and the page looks neat and works on phones straight away.

Why Learn Bootstrap?

• It is one of the most used front-end frameworks in the world
• You can build a clean, responsive website in hours instead of days
• Its 12-column grid makes layouts for phones, tablets and laptops easy
• Many company websites, admin panels and freelance projects are built with it
• It works with any back end: PHP, Laravel, Django, WordPress themes and more

You should know basic HTML and CSS first.

Try It Yourself

The examples load Bootstrap 5 from a CDN, so they run in the Try it editor. Change btn-primary to btn-success and click Run.

<!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>

<div class="container py-5 text-center">
  <h1 class="display-5 fw-bold">Bilal's Bookshop</h1>
  <p class="lead text-secondary">School and college books delivered across Karachi.</p>
  <a href="#" class="btn btn-primary btn-lg">Order Books</a>
</div>

</body>
</html>

What You Will Learn

• How to add Bootstrap 5 to a page
• Containers and the responsive grid system
• Text, colour and spacing utility classes
• Buttons, alerts, badges, tables and cards
• A responsive navigation bar
• Neat, accessible forms

What to Learn Next

After Bootstrap, try Tailwind CSS for a different, utility-first way of styling, learn Sass to customise Bootstrap's source, and learn JavaScript to add your own interaction.