Back to Home
What is Bootstrap and How to Use It — Uncodemy Blog / Page 1 of 9: What is Bootstrap? — Introduction & Setup
Introduction

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.
Key Takeaway: Bootstrap is a complete frontend toolkit. Once you understand its core concepts, you can build professional websites faster than ever.
PreviousYou're at the beginning!

Ready to master Bootstrap?

Master Bootstrap from scratch. Learn how to build modern, responsive websites with this complete frontend framework guide.

Explore Uncodemy