There are several methods to include Bootstrap:

1. CDN (Content Delivery Network):

   <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>
   

2. Package Managers:

   • npm: npm install bootstrap
   • yarn: yarn add bootstrap

3. Download and Host Locally: Download compiled CSS and JS files from the official website

4. Source Files: Download Sass source files for custom builds

Bootstrap provides three main container classes:

1. .container: Fixed-width container with responsive breakpoints

   • Provides max-width at different screen sizes
   • Centers content horizontally

2. .container-fluid: Full-width container

   • Spans 100% of the viewport width
   • No maximum width restrictions

3. .container-{breakpoint} (Bootstrap 4+): Responsive containers

   • .container-sm, .container-md, .container-lg, .container-xl, .container-xxl
   • 100% width until specified breakpoint, then behaves like .container

The Bootstrap grid system is a flexbox-based layout system that uses containers, rows, and columns to create responsive layouts.

Key concepts:

• 12-column system: Each row is divided into 12 equal columns
• Responsive breakpoints: xs, sm, md, lg, xl, xxl
• Mobile-first: Designed for mobile devices first, then scales up

Basic structure:

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

Use column classes with breakpoint prefixes to create responsive layouts:

<div class="row">
  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
    <!-- 100% on xs, 50% on sm, 33.33% on md, 25% on lg and xl -->
  </div>
</div>

Column behavior:

• Without breakpoint: applies to all screen sizes
• With breakpoint: applies to that breakpoint and larger
• Multiple classes: different behavior at different breakpoints

Bootstrap provides several ways to create equal-width columns:

1. Basic equal columns:

   <div class="row">
     <div class="col">Column 1</div>
     <div class="col">Column 2</div>
     <div class="col">Column 3</div>
   </div>
   

2. Equal columns with breakpoints:

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

3. Equal-width multi-row:

   <div class="row">
     <div class="col">Column</div>
     <div class="w-100"></div> <!-- Force next columns to new line -->
     <div class="col">Column</div>
   </div>
   

Bootstrap provides various button styles and states:

Basic button types:

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

Button variants:

• Outline buttons: btn-outline-primary
• Sizes: btn-sm, btn-lg
• Block buttons: d-grid wrapper or w-100 class
• States: active, disabled

Bootstrap provides table classes for styling and responsive behavior:

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Table classes:

• table-striped: Alternate row colors
• table-hover: Hover effect on rows
• table-bordered: Add borders
• table-responsive: Horizontal scrolling on small screens
• table-{color}: Contextual background colors

Dropdowns are toggleable overlays for displaying lists of links:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Dropdown variations:

• dropup, dropend, dropstart: Direction modifiers
• dropdown-menu-end: Right-aligned menu
• dropdown-item-text: Non-interactive text
• dropdown-header: Section headers

Alerts provide contextual feedback messages:

<!-- Basic alert -->
<div class="alert alert-warning" role="alert">
  This is a warning alert!
</div>

<!-- Dismissible alert -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Error!</strong> Something went wrong.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Alert with additional content -->
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p class="mb-0">Success message with <a href="#" class="alert-link">a link</a>.</p>
</div>

Alert types: alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, alert-dark.

Bootstrap provides text and background color utilities based on the theme colors:

<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-muted">Muted text</p>

<!-- Background colors -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-light text-dark">Light background</div>

<!-- Contextual colors -->
<span class="badge bg-warning text-dark">Warning badge</span>

Available colors: primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black-50, white-50.

Border utilities provide control over element borders:

<!-- Add borders -->
<div class="border">All borders</div>
<div class="border-top border-start">Top and left borders</div>

<!-- Remove borders -->
<div class="border border-top-0">All except top border</div>

<!-- Border colors -->
<div class="border border-primary">Primary border color</div>

<!-- Border radius -->
<div class="rounded">Rounded corners</div>
<div class="rounded-circle">Circular border</div>
<div class="rounded-pill">Pill-shaped border</div>

Border sides: border-top, border-end, border-bottom, border-start.
Border radius: rounded-top, rounded-end, rounded-bottom, rounded-start, rounded-circle, rounded-pill.

Text utilities control text styling, alignment, and behavior:

<!-- Text alignment -->
<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>

<!-- Text transformation -->
<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalize each word</p>

<!-- Font weight and style -->
<p class="fw-bold">Bold text</p>
<p class="fw-normal">Normal weight</p>
<p class="fst-italic">Italic text</p>

<!-- Text decoration -->
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-none">No decoration</p>

Bootstrap provides classes for responsive image behavior:

<!-- Responsive image that scales with parent width -->
<img src="image.jpg" class="img-responsive" alt="Responsive image">

<!-- Bootstrap 4+ uses img-fluid -->
<img src="image.jpg" class="img-fluid" alt="Responsive image">

<!-- Image shapes -->
<img src="image.jpg" class="img-thumbnail" alt="Thumbnail">
<img src="image.jpg" class="rounded" alt="Rounded corners">
<img src="image.jpg" class="rounded-circle" alt="Circular image">

<!-- Figure with caption -->
<figure class="figure">
  <img src="image.jpg" class="figure-img img-fluid rounded" alt="Figure">
  <figcaption class="figure-caption">Image caption</figcaption>
</figure>

The img-fluid class applies max-width: 100% and height: auto for responsive scaling.

These are the three main container types in Bootstrap:

.container:

• Fixed max-width at each breakpoint
• Responsive horizontal margins that center the content
• Max-widths: 540px (sm), 720px (md), 960px (lg), 1140px (xl), 1320px (xxl)

.container-fluid:

• 100% width at all breakpoints
• No maximum width restrictions
• Edge-to-edge content spanning full viewport width

.container-{breakpoint}:

• 100% width until the specified breakpoint
• Then behaves like .container with fixed max-width
• Available: .container-sm, .container-md, .container-lg, .container-xl, .container-xxl

<div class="container">Fixed-width responsive container</div>
<div class="container-fluid">Full-width container</div>
<div class="container-md">Fluid until medium breakpoint, then fixed</div>