Bootstrap Quick Reference

1. Bootstrap Basics

Include Bootstrap (CDN):

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

Container Types:

• .container (Fixed width)
• .container-fluid (Full width)

2. Grid System

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

Grid Classes:

• .row → Defines a row
• .col → Auto-sized columns
• .col-{size}-{number} (e.g., .col-md-6 → Medium breakpoint, 6 columns wide)

3. Typography

• h1 to h6 → Headings
• .display-1 to .display-6 → Large headings
• .lead → Highlighted text
• .text-primary, .text-danger, .text-success → Text colors
• .fw-bold, .fw-light → Font weight

4. Buttons

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

Button Sizes: .btn-sm, .btn-lg

Block Button: .d-grid .btn

5. Forms

<form>
<input type="text" class="form-control" placeholder="Enter text">
<select class="form-select">
    <option>Option 1</option>
    <option>Option 2</option>
</select>
</form>

Form Styling:

• .form-control → Input styling
• .form-select → Styled dropdowns
• .input-group → Grouping inputs

6. Alerts

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

Types: .alert-success, .alert-danger, .alert-info

7. Cards

<div class="card" style="width: 18rem;">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

8. Modals

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">Modal content</div>
    </div>
</div>
</div>

9. Navigation Bar

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

10. Utility Classes

• Spacing: m-1, p-2, mt-3, mb-4
• Flexbox: d-flex, justify-content-center, align-items-center
• Visibility: d-none, d-block
• Backgrounds: bg-primary, bg-light, bg-dark
• Text Alignment: text-center, text-end

11. React + Bootstrap

Install Bootstrap in React:

npm install bootstrap

Import Bootstrap in React:

import 'bootstrap/dist/css/bootstrap.min.css';

Example Button in React:

<button className="btn btn-success">Click Me</button>