Bootstrap — Rapid UI with Components

Use the grid, components, and utilities to ship polished UIs fast.

Introduction to Bootstrap

Bootstrap is a widely used front-end framework that helps developers build responsive and mobile-first websites quickly. It comes with a predefined grid system, ready-made UI components, and utility classes that reduce the amount of custom CSS you need to write.

• Responsive: Adapts layouts automatically for mobile, tablet, and desktop.
• Consistent: Provides a uniform look across all modern browsers.
• Customizable: Can be extended or overridden with your own CSS.

Why Bootstrap is Popular

Bootstrap is chosen by many developers because it is:

1. Easy to learn and integrate into any project.
2. Packed with built-in components like navbars, modals, buttons, and forms.
3. Maintained and updated regularly by a large open-source community.
4. Compatible with modern JavaScript frameworks (React, Angular, Vue).

With Bootstrap, even beginners can create professional-looking websites without deep design knowledge.

Grid & Utilities

<div class="container">
  <div class="row g-3">
    <div class="col-md-4"><div class="p-3 border rounded">A</div></div>
    <div class="col-md-4"><div class="p-3 border rounded">B</div></div>
    <div class="col-md-4"><div class="p-3 border rounded">C</div></div>
  </div>
</div>

Navbar & Modal

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#demoModal">Open</button>
  </div>
</nav>
<div class="modal fade" id="demoModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Hello</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">Bootstrap modal body</div>
    </div>
  </div>
</div>

Bootstrap Forms

<form class="row g-3">
  <div class="col-md-6"><label class="form-label">Email</label><input type="email" class="form-control" required></div>
  <div class="col-md-6"><label class="form-label">Password</label><input type="password" class="form-control" required></div>
  <div class="col-12"><button class="btn btn-primary">Submit</button></div>
</form>