What is Bootstrap?
Bootstrap is a free, open-source CSS framework developed by Twitter that helps create responsive, mobile-first websites quickly and easily. It contains pre-built components and a powerful grid system that makes web development faster and more efficient.
Latest Version
Bootstrap 5 is the current stable version, which dropped jQuery dependency and Internet Explorer support for improved performance and modern features.
Getting Started with Bootstrap
1. Installation Methods
Method 1: CDN Links
Add these links in your HTML <head> section:
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- JavaScript Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>Method 2: Download Files
Download Bootstrap files from the official website and include them in your project:
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>Method 3: Package Managers
# Using npm
npm install bootstrap
# Using yarn
yarn add bootstrapKey Features
1. Grid System
Bootstrap uses a 12-column grid system for layout:
<div class="container">
<div class="row">
<div class="col-md-6">Left Column</div>
<div class="col-md-6">Right Column</div>
</div>
</div>Grid Breakpoints
- xs (extra small): < 576px
- sm (small): ≥ 576px
- md (medium): ≥ 768px
- lg (large): ≥ 992px
- xl (extra large): ≥ 1200px
- xxl (extra extra large): ≥ 1400px
2. Typography
<h1 class="display-1">Large Header</h1>
<p class="lead">Standout paragraph text</p>
<p class="text-muted">Muted text</p>
<blockquote class="blockquote">
<p>Quote text here</p>
</blockquote>3. Colors
Bootstrap’s default color classes:
<p class="text-primary">Primary Text</p>
<p class="text-secondary">Secondary Text</p>
<p class="text-success">Success Text</p>
<p class="text-danger">Danger Text</p>
<p class="text-warning">Warning Text</p>
<p class="text-info">Info Text</p>4. Components
Buttons
<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>Navigation Bar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</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 active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>Cards
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Card content here.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>Forms
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>5. Utilities
Spacing
- Margin: m-{size}
- Padding: p-{size}
<div class="m-3">Margin 3</div>
<div class="p-3">Padding 3</div>Flexbox
<div class="d-flex justify-content-between align-items-center">
<div>Item 1</div>
<div>Item 2</div>
</div>Border
<div class="border border-primary rounded">
Bordered content
</div>Responsive Design Examples
Responsive Images
<img src="..." class="img-fluid" alt="Responsive image">Responsive Tables
<div class="table-responsive">
<table class="table">
<!-- table content -->
</table>
</div>Best Practices
- Mobile-First Approach
<div class="col-12 col-md-6 col-lg-4">
<!-- Content adapts to different screen sizes -->
</div>- Container Usage
<!-- Fixed-width container -->
<div class="container">
<!-- Content -->
</div>
<!-- Full-width container -->
<div class="container-fluid">
<!-- Content -->
</div>- Nested Grids
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6">Nested Column</div>
<div class="col-md-6">Nested Column</div>
</div>
</div>
<div class="col-md-3">Sidebar</div>
</div>Common Components Combinations
Hero Section
<div class="container-fluid py-5 bg-light">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h1 class="display-4">Welcome to Our Site</h1>
<p class="lead">This is a hero section created with Bootstrap.</p>
<button class="btn btn-primary btn-lg">Get Started</button>
</div>
<div class="col-md-6">
<img src="..." class="img-fluid" alt="Hero image">
</div>
</div>
</div>
</div>Card Grid
<div class="container">
<div class="row g-4">
<div class="col-md-4">
<div class="card">
<!-- Card content -->
</div>
</div>
<div class="col-md-4">
<div class="card">
<!-- Card content -->
</div>
</div>
<div class="col-md-4">
<div class="card">
<!-- Card content -->
</div>
</div>
</div>
</div>Performance Tips
- Only include the components you need
- Use the minified version of Bootstrap files
- Consider using Bootstrap’s built-in utility classes instead of custom CSS
- Optimize images and other media content
- Use appropriate breakpoints for responsive design
Remember to always check the official Bootstrap documentation for the most up-to-date information and features.