Bootstrap Project Examples

Introduction

Now that you’ve learned about Bootstrap’s core components, it’s time to apply everything in real-world projects.

1. Portfolio Website

A portfolio allows you to showcase skills and projects. Key components: Navbar, Hero, Progress Bars, Cards.

<!-- Hero Section -->
<header class="hero bg-primary text-white text-center py-5">
  <div class="container">
    <h1 class="display-3">Hi, I'm John Doe</h1>
    <p class="lead">A passionate web developer</p>
    <a href="#contact" class="btn btn-light btn-lg">Get In Touch</a>
  </div>
</header>

<!-- Skills Section -->
<div class="progress">
  <div class="progress-bar" style="width: 90%"></div>
</div>

2. E-Commerce Dashboard

A complex layout featuring a sidebar, cards for stats, and tables for data.

<div class="d-flex" id="wrapper">
  <!-- Sidebar -->
  <div class="bg-dark text-white p-4" id="sidebar">
    <ul class="nav flex-column">
      <li class="nav-item"><a href="#" class="nav-link text-white">Dashboard</a></li>
    </ul>
  </div>

  <!-- Main Content -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">Sales</h5>
          </div>
        </div>
      </div>
    </div>

    <table class="table"> ... </table>
  </div>
</div>

3. Blog Layout

A standard blog with a main content area and a sidebar for categories.

<div class="row">
  <!-- Blog Posts -->
  <div class="col-md-8">
    <div class="post mb-4">
      <h2>Post Title</h2>
      <p>Excerpt...</p>
      <a href="#" class="btn btn-primary">Read More</a>
    </div>
  </div>

  <!-- Sidebar -->
  <div class="col-md-4">
    <div class="sidebar">
      <h3>Categories</h3>
      <ul class="list-group">
        <li class="list-group-item">Tech</li>
      </ul>
    </div>
  </div>
</div>