Introduction

Bootstrap is a popular front-end framework for building responsive, mobile-first websites quickly using HTML, CSS, and JavaScript components.

Why Use Bootstrap?

• Speeds up UI development with reusable components.
• Provides a consistent design system and spacing scale.
• Built-in responsiveness with a 12-column grid.

Core Concepts

• Grid system: responsive layouts using rows and columns.
• Utilities: quick helpers for spacing, colors, display, and sizing.
• Components: ready-made UI like navbars, cards, alerts, modals.

Getting Started

The quickest setup is via CDN. For production, you can also install Bootstrap via npm and customize it with Sass.

<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Include Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap uses a combination of CSS classes and JS components.

Required Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1">
      

Optional NPM Install

npm install bootstrap
      

Grid System

Bootstrap uses a 12-column responsive grid system with breakpoints like sm, md, lg, and xl.

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

Responsive Columns

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">A</div>
  <div class="col-12 col-md-6 col-lg-4">B</div>
  <div class="col-12 col-lg-4">C</div>
</div>
      

Gutters and Alignment

<div class="row g-3 align-items-center">
  <div class="col">Item</div>
  <div class="col">Item</div>
</div>
      

Typography

Bootstrap includes responsive typography styles and utility classes.

<h1 class="display-1">Heading</h1>
<p class="lead">This is lead paragraph</p>
<small>Small text</small>

Bootstrap provides utility classes for headings, paragraphs, and text alignment, colors, and emphasis.

Text Utilities

<p class="text-uppercase text-center text-muted">Centered Uppercase</p>
<p class="fw-bold fst-italic">Bold + Italic</p>
      

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-outline-danger">Outline</button>

Bootstrap buttons have pre-defined styles and variants.

Sizes and States

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-secondary" disabled>Disabled</button>
      

Button Groups

<div class="btn-group">
  <button class="btn btn-outline-dark">Left</button>
  <button class="btn btn-outline-dark">Middle</button>
  <button class="btn btn-outline-dark">Right</button>
</div>
      

Forms

<form>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control">
  </div>
</form>

Bootstrap provides input groups, validation classes, and custom form controls.

Input Groups

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="username">
</div>
      

Validation States

<input class="form-control is-valid">
<div class="valid-feedback">Looks good!</div>

<input class="form-control is-invalid">
<div class="invalid-feedback">Please fix this.</div>
      

Navbars

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</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" href="#">Home</a></li>
    </ul>
  </div>
</nav>

Navbar Utilities

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  ...
</nav>
      

Cards

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some text.</p>
  </div>
</div>

Card Layouts

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Body</div>
  <div class="card-footer">Footer</div>
</div>
      

Modals

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch</button>
<div class="modal fade" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Modal</h5></div>
      <div class="modal-body">Content</div>
    </div>
  </div>
</div>

Modal Footer and Actions

<div class="modal-footer">
  <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  <button class="btn btn-primary">Save</button>
</div>
      

Utility Classes

Bootstrap offers utility classes for spacing, colors, display, flex, text, borders, and more.

<div class="m-3 p-2 bg-light text-center">Box</div>

Common Utilities

<div class="d-flex gap-2 align-items-center">...</div>
<div class="text-primary fw-semibold">Primary Text</div>
<div class="border rounded p-3">Card</div>