Bootstrap CSS Framework

The world's most popular front-end component library for building responsive, mobile-first websites.

What is Bootstrap?

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

Rapid Development

Pre-built components and utilities speed up development significantly

Responsive Design

Mobile-first approach with comprehensive breakpoint system

Consistent Design

Unified design language and extensive component library

Grid System

Key Features:

  • 12-column responsive grid system - Flexible layout foundation
  • 6 responsive breakpoints - xs, sm, md, lg, xl, xxl for precise control
  • Flexbox-based - Modern layout with mobile-first approach
  • Auto-layout columns - Equal width distribution without specific sizing
  • Nesting support - Grids within grids for complex layouts

Grid System Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Grid System</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .grid-demo [class*="col"] {
      background: #0d6efd;
      color: white;
      padding: 1rem;
      border: 2px solid white;
      text-align: center;
    }
    .demo-section {
      margin: 2rem 0;
      padding: 2rem;
      background: #f8f9fa;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="container py-4">
    <h1 class="text-center mb-4">Bootstrap Grid System</h1>

    <div class="demo-section">
      <h3>Basic Grid - Equal Width Columns</h3>
      <p class="text-muted">Automatically divides available space equally</p>
      <div class="row grid-demo">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
      </div>
    </div>

    <div class="demo-section">
      <h3>Responsive Grid - Stack on Mobile</h3>
      <p class="text-muted">Columns stack vertically on mobile, become horizontal on medium screens</p>
      <div class="row grid-demo">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
      </div>
    </div>

    <div class="demo-section">
      <h3>Mixed Column Widths</h3>
      <p class="text-muted">Custom column ratios using Bootstrap's 12-column system</p>
      <div class="row grid-demo">
        <div class="col-8">col-8 (66.66%)</div>
        <div class="col-4">col-4 (33.33%)</div>
      </div>
    </div>

    <div class="demo-section">
      <h3>Nested Grid System</h3>
      <p class="text-muted">Grids can be nested inside other grid columns</p>
      <div class="row grid-demo">
        <div class="col-6">
          Parent col-6
          <div class="row">
            <div class="col-6">Nested col-6</div>
            <div class="col-6">Nested col-6</div>
          </div>
        </div>
        <div class="col-6">Parent col-6</div>
      </div>
    </div>
  </div>
</body>
</html>

Components

Component Library:

ButtonsCardsNavbarsModalsAlertsFormsCarouselsDropdowns

Components Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Components</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-section {
      margin: 2rem 0;
      padding: 2rem;
      background: #f8f9fa;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="container py-4">
    <h1 class="text-center mb-4">Bootstrap Components</h1>

    <div class="demo-section">
      <h3>Button Variants</h3>
      <p class="text-muted">Pre-styled buttons for different actions and importance levels</p>
      <button class="btn btn-primary me-2">Primary</button>
      <button class="btn btn-secondary me-2">Secondary</button>
      <button class="btn btn-success me-2">Success</button>
      <button class="btn btn-danger me-2">Danger</button>
      <button class="btn btn-warning me-2">Warning</button>
      <button class="btn btn-info me-2">Info</button>
    </div>

    <div class="demo-section">
      <h3>Card Components</h3>
      <p class="text-muted">Flexible content containers with multiple layout options</p>
      <div class="row">
        <div class="col-md-4 mb-3">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Basic Card</h5>
              <p class="card-text">Simple card with text content and action button.</p>
              <a href="#" class="btn btn-primary">Action</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Feature Card</h5>
              <p class="card-text">Card demonstrating different content types.</p>
              <a href="#" class="btn btn-success">Learn More</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>Alert Components</h3>
      <p class="text-muted">Contextual feedback messages for user actions</p>
      <div class="alert alert-primary" role="alert">Primary alert - Informational message</div>
      <div class="alert alert-success" role="alert">Success alert - Positive confirmation</div>
      <div class="alert alert-warning" role="alert">Warning alert - Caution required</div>
      <div class="alert alert-danger" role="alert">Danger alert - Error or problem</div>
    </div>

    <div class="demo-section">
      <h3>Navigation Components</h3>
      <p class="text-muted">Tab-based navigation with active state tracking</p>
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active Tab</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Inactive Tab</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Another Tab</a>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

Forms

Form Features:

  • Custom form controls - Consistent styling across all browsers
  • Input groups - Text add-ons and button integrations
  • Floating labels - Modern label placement
  • Form validation - Built-in validation styles and feedback
  • Responsive layout - Forms that adapt to screen size

Forms Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Forms</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-section {
      margin: 2rem 0;
      padding: 2rem;
      background: #f8f9fa;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="container py-4">
    <h1 class="text-center mb-4">Bootstrap Forms</h1>

    <div class="demo-section">
      <h3>Basic Form Structure</h3>
      <p class="text-muted">Properly structured forms with labels and form controls</p>
      <form>
        <div class="mb-3">
          <label for="email" class="form-label">Email Address</label>
          <input type="email" class="form-control" id="email" placeholder="name@example.com">
          <div class="form-text">We'll never share your email with anyone else.</div>
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">Password</label>
          <input type="password" class="form-control" id="password">
        </div>
        <div class="mb-3 form-check">
          <input type="checkbox" class="form-check-input" id="remember">
          <label class="form-check-label" for="remember">Remember me</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit Form</button>
      </form>
    </div>

    <div class="demo-section">
      <h3>Responsive Form Layout</h3>
      <p class="text-muted">Multi-column forms that adapt to different screen sizes</p>
      <div class="row">
        <div class="col-md-6">
          <div class="mb-3">
            <label class="form-label">First Name</label>
            <input type="text" class="form-control" placeholder="Enter first name">
          </div>
        </div>
        <div class="col-md-6">
          <div class="mb-3">
            <label class="form-label">Last Name</label>
            <input type="text" class="form-control" placeholder="Enter last name">
          </div>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>Form Controls - Select & Textarea</h3>
      <p class="text-muted">Advanced form elements with custom styling</p>
      <div class="mb-3">
        <label class="form-label">Select Option</label>
        <select class="form-select">
          <option selected>Choose an option...</option>
          <option value="1">Option One</option>
          <option value="2">Option Two</option>
          <option value="3">Option Three</option>
        </select>
      </div>
      <div class="mb-3">
        <label class="form-label">Message Textarea</label>
        <textarea class="form-control" rows="3" placeholder="Enter your message"></textarea>
      </div>
    </div>

    <div class="demo-section">
      <h3>Input Groups</h3>
      <p class="text-muted">Form controls with attached text or buttons</p>
      <div class="input-group mb-3">
        <span class="input-group-text">@</span>
        <input type="text" class="form-control" placeholder="Username">
      </div>
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username">
        <span class="input-group-text">@example.com</span>
      </div>
    </div>
  </div>
</body>
</html>

Utilities

Utility Classes:

SpacingColorsTextBordersShadowsDisplay

Utilities Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Utilities</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-section {
      margin: 2rem 0;
      padding: 2rem;
      background: #f8f9fa;
      border-radius: 10px;
    }
    .utility-box {
      background: #0d6efd;
      color: white;
      padding: 1rem;
      margin: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="container py-4">
    <h1 class="text-center mb-4">Bootstrap Utilities</h1>

    <div class="demo-section">
      <h3>Spacing Utilities</h3>
      <p class="text-muted">Consistent margin and padding using shorthand classes</p>
      <div class="utility-box p-3 mb-2">p-3 (padding: 1rem) mb-2 (margin-bottom: 0.5rem)</div>
      <div class="utility-box m-4 p-4">m-4 (margin: 1.5rem) p-4 (padding: 1.5rem)</div>
      <div class="utility-box mt-5 pt-5">mt-5 (margin-top: 3rem) pt-5 (padding-top: 3rem)</div>
    </div>

    <div class="demo-section">
      <h3>Text & Color Utilities</h3>
      <p class="text-muted">Text alignment, coloring, and typography helpers</p>
      <p class="text-primary">.text-primary - Primary color text</p>
      <p class="text-success">.text-success - Success color text</p>
      <p class="text-danger">.text-danger - Danger color text</p>
      <p class="text-warning bg-dark">.text-warning .bg-dark - Warning text on dark background</p>
      <p class="text-center">.text-center - Center aligned text</p>
      <p class="text-end">.text-end - Right aligned text</p>
      <p class="fw-bold">.fw-bold - Bold font weight</p>
      <p class="fst-italic">.fst-italic - Italic font style</p>
    </div>

    <div class="demo-section">
      <h3>Background Color Utilities</h3>
      <p class="text-muted">Contextual background colors with proper contrast</p>
      <div class="p-3 mb-2 bg-primary text-white">.bg-primary - Primary background</div>
      <div class="p-3 mb-2 bg-success text-white">.bg-success - Success background</div>
      <div class="p-3 mb-2 bg-warning text-dark">.bg-warning - Warning background</div>
      <div class="p-3 mb-2 bg-danger text-white">.bg-danger - Danger background</div>
    </div>

    <div class="demo-section">
      <h3>Border & Shadow Utilities</h3>
      <p class="text-muted">Border styling and shadow effects for depth</p>
      <div class="p-3 mb-3 border">.border - Default border</div>
      <div class="p-3 mb-3 border border-primary">.border-primary - Primary colored border</div>
      <div class="p-3 mb-3 border-success border-3">.border-success .border-3 - Thick success border</div>
      <div class="p-3 mb-3 shadow-sm">.shadow-sm - Small shadow</div>
      <div class="p-3 mb-3 shadow">.shadow - Regular shadow</div>
    </div>

    <div class="demo-section">
      <h3>Display & Visibility Utilities</h3>
      <p class="text-muted">Control element display and responsive visibility</p>
      <div class="d-inline p-2 bg-primary text-white">d-inline - Inline display</div>
      <div class="d-inline p-2 bg-dark text-white">d-inline - Another inline element</div>
      <div class="d-block p-2 bg-success text-white">d-block - Block display</div>
      <div class="d-none d-md-block p-2 bg-warning text-dark">Visible only on medium screens and up</div>
    </div>
  </div>
</body>
</html>

Quick Start Guide

CDN Method (Easiest)

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

<!-- Complete Bundle (CSS + JS) -->
<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>

Package Manager (npm)

# Install via npm
npm install bootstrap@5.3.0

# Import in your JavaScript
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

// Or import specific components
import { Modal, Toast } from 'bootstrap';

Best Practices

✅ Do This

  • Mobile-first approach - Start with mobile design
  • Use utility classes - Leverage built-in spacing and styling
  • Semantic HTML - Maintain proper document structure
  • Customize with SASS - Use variables for theming
  • Responsive images - Use img-fluid class

❌ Avoid This

  • Overriding core styles - Use customization methods instead
  • Ignoring breakpoints - Always consider responsive behavior
  • Deep nesting - Keep grid structures simple
  • Forgetting JavaScript - Some components require JS
  • Inline styles - Use utility classes instead

Ready to Build with Bootstrap?

Start creating beautiful, responsive websites with the world's most popular CSS framework.

< PreviousNext >