What is Bootstrap? — Introduction & Setup

Bootstrap is the world's most popular frontend framework for building responsive, mobile-first websites. Created by Twitter developers, it's now used by millions of developers worldwide to build professional, consistent UIs quickly.

Why Bootstrap?

• Speed: Pre-built components (buttons, forms, navigation, cards, modals).
• Responsive: Built-in grid system that adapts to any screen size.
• Consistent: A unified design language across your entire project.
• Cross-browser: Handles browser quirks automatically.
• Customizable: Full customization with Sass variables.

Setting Up Bootstrap

Method 1: CDN (Recommended for Beginners)

Add these links to the <head> section of your HTML:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JavaScript Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Method 2: npm

npm install bootstrap

Method 3: Download

Download the compiled CSS and JS from getbootstrap.com.

Minimal Starter Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Starter</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="text-center mt-5">Hello, Bootstrap!</h1>
        <p class="text-center">Your first Bootstrap page.</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Key Concepts to Remember

• Container: The outermost wrapper that centers and pads your content.
• Grid: 12-column system with rows and columns.
• Components: Pre-built UI elements you can use directly.
• Utilities: Single-purpose classes for spacing, colors, flexbox, etc.