🚀 Bootstrap 5 Tutorial for Beginners

Learn how to build beautiful, responsive websites quickly with the world's most popular CSS framework. This step-by-step guide will take you from zero to building your first Bootstrap site!

📋 Prerequisites: Before starting, you should have a basic understanding of:

HTML (tags, attributes, structure)
CSS (selectors, basic properties like margins, padding, and colors)

Step 1: Setting up Bootstrap

There are a few ways to install Bootstrap, but for beginners, using a CDN (Content Delivery Network) is the easiest. It allows you to link to Bootstrap's files hosted on the internet without downloading anything.

Create a new file named index.html and paste the following Starter Template into it:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First Bootstrap Site</title>
    
    <!-- Bootstrap 5 CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <h1>Hello, Bootstrap!</h1>

    <!-- Bootstrap 5 JS Bundle CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

💡 Tip: Open this file in your browser. You will see "Hello, Bootstrap!" in the default system font. We are ready to style!

Step 2: The Container

Everything in Bootstrap should be wrapped in a Container. Containers center your content on the page and provide padding on the sides.

There are two main types:

.container: A fixed-width container that changes size at different screen breakpoints (best for standard websites).
.container-fluid: A full-width container that spans 100% of the viewport (best for headers/footers).

<div class="container">
  <h1>My content is now centered and padded!</h1>
</div>

Step 3: The Grid System (Layout)

This is the most important concept in Bootstrap. The grid system divides the screen into 12 equal columns. You can combine these columns to create any layout.

The grid uses three classes:

.container (wraps the grid)
.row (creates a horizontal group of columns)
.col-* (defines how many of the 12 columns an element takes up)

Example: Two Equal Columns

<div class="container">
  <div class="row">
    <div class="col-6" style="background: lightblue;">Column 1 (Half width)</div>
    <div class="col-6" style="background: lightcoral;">Column 2 (Half width)</div>
  </div>
</div>

Example: Responsive Columns (Mobile vs Desktop)

Bootstrap is mobile-first. You can tell columns to behave differently on different screen sizes using breakpoints (sm, md, lg, xl).

<div class="container">
  <div class="row">
    <!-- On mobile (default), it takes 12 columns (full width). 
         On medium screens (md) and up, it takes 4 columns (1/3 width). -->
    <div class="col-12 col-md-4" style="background: lightgreen;">Item 1</div>
    <div class="col-12 col-md-4" style="background: lightyellow;">Item 2</div>
    <div class="col-12 col-md-4" style="background: lightpink;">Item 3</div>
  </div>
</div>

Step 4: Basic Utility Classes

Bootstrap has hundreds of "utility classes" that let you style things without writing custom CSS.

Text Alignment: .text-center, .text-end, .text-start
Colors: .text-primary (blue), .text-danger (red), .bg-light (light background)
Spacing (Margin & Padding): Uses the format {property}{sides}-{size}
- m = margin, p = padding
- t = top, b = bottom, x = left/right, y = top/bottom
- 1 to 5 = size (e.g., 3 is roughly 1rem)
- Example: .mt-3 (margin-top), .p-4 (padding all around), .mb-2 (margin-bottom)

<p class="text-center text-primary mt-5">This is centered, blue, and has space above it.</p>

Step 5: Buttons and Cards

Let's look at two of the most common UI components.

Buttons

Add the .btn class, plus a color variant like .btn-primary, .btn-success, .btn-outline-danger.

<button class="btn btn-primary">Save Changes</button>
<button class="btn btn-outline-danger">Delete</button>

Cards

Cards are great for displaying content like blog posts or products.

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Step 6: Building a Mini-Project

Let's combine everything we've learned into a simple, responsive landing page. Copy and paste this into your index.html body:

<!-- 1. NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">MyBrand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 2. HERO SECTION -->
<div class="bg-light py-5 text-center">
  <div class="container">
    <h1 class="display-4 fw-bold">Welcome to Our Website</h1>
    <p class="lead text-muted">Build beautiful, responsive websites quickly with Bootstrap.</p>
    <button class="btn btn-primary btn-lg mt-3">Get Started</button>
  </div>
</div>

<!-- 3. FEATURES SECTION -->
<div class="container my-5">
  <h2 class="text-center mb-4">Our Features</h2>
  <div class="row g-4">
    <div class="col-md-4">
      <div class="card h-100 text-center p-3">
        <div class="card-body">
          <h5 class="card-title">Fast</h5>
          <p class="card-text">Bootstrap is optimized for speed and performance.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card h-100 text-center p-3">
        <div class="card-body">
          <h5 class="card-title">Responsive</h5>
          <p class="card-text">Looks perfect on mobile, tablet, and desktop.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card h-100 text-center p-3">
        <div class="card-body">
          <h5 class="card-title">Customizable</h5>
          <p class="card-text">Easily tweak themes and components to fit your brand.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 4. FOOTER -->
<footer class="bg-dark text-white text-center py-4 mt-5">
  <div class="container">
    <p class="mb-0">&copy; 2024 MyBrand. All rights reserved.</p>
  </div>
</footer>

🎯 Try this: Resize your browser window. You will see the Navbar collapse into a "hamburger" menu on mobile, and the 3 feature cards will stack on top of each other on mobile, but sit side-by-side on a desktop!

🚀 Next Steps for Beginners

Read the Official Docs: The Bootstrap Documentation is incredibly well-written. Keep it open in a tab while you build.
Explore Components: Look into Accordions, Modals (pop-ups), Carousels (image sliders), and Forms.
Learn Flexbox: Bootstrap's grid and alignment utilities (like .d-flex, .justify-content-center, .align-items-center) are based on CSS Flexbox. Understanding Flexbox will make you a Bootstrap master.
Practice: Try to recreate the layout of your favorite website using only Bootstrap classes.

Did you find this tutorial helpful?

Share it with your friends and start building amazing websites today! 🎉

Front End Web Development With BootStrap 20220622