Bootstrap Complete Tutorial - Sahasransu Satpathy

Introduction

Bootstrap is a popular CSS framework for building responsive and mobile-first websites quickly. This tutorial covers setup, the grid system, components, utilities, and practical examples.

Step 1: Setting Up Bootstrap

Include Bootstrap via CDN or npm:

CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

NPM

npm install bootstrap

Step 2: Bootstrap Grid System

Bootstrap uses a 12-column grid for responsive layouts:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Step 3: Typography & Utilities

Bootstrap provides classes for text, spacing, colors, and more:

<h1 class="display-4 text-primary">Hello Bootstrap!</h1>
<p class="text-muted mb-3">This is a paragraph with Bootstrap utilities.</p>

Step 4: Components

Bootstrap offers ready-to-use components like buttons, cards, and navbars:

Button Example

<button class="btn btn-primary btn-lg">Click Me</button>

Card Example

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Example card with Bootstrap styling.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Step 5: Responsive Navbar

Create a responsive navbar easily:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MyWebsite</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">
      <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>
</nav>

Step 6: Forms & Buttons

Bootstrap forms and buttons are responsive and styled:

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
  </div>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

Step 7: Practical Example – Responsive Card Layout

<div class="container">
  <div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
      <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">Bootstrap responsive card example.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">Bootstrap responsive card example.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Conclusion

By following this tutorial, you’ll understand Bootstrap fundamentals, responsive grids, and ready-to-use components, enabling fast UI development for modern web projects.

SEO Suggestions:

Main keywords: Bootstrap tutorial, Bootstrap for beginners, responsive Bootstrap examples, Bootstrap 5 guide
Meta description: Learn Bootstrap from scratch with responsive grids, components, utilities, and practical examples. Step-by-step tutorial for 2026.
Catchy title suggestions: "Bootstrap Complete Tutorial 2026", "Master Bootstrap 5: Step-by-Step Guide"