Technical reference

Bootstrap Cheatsheet

Responsive components and layout utilities

Must Know

html

Responsive Grid

Bootstrap's grid is mobile-first.

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-4">...</div>
  </div>
</div>

html

Flex Utilities

<div class="d-flex flex-column flex-sm-row align-items-sm-center gap-3">...</div>

Important Patterns

html

Accessible Modal

Keep labels, focus management, and dismiss controls intact.

<button data-bs-toggle="modal" data-bs-target="#confirmModal">Delete</button>
<div class="modal" id="confirmModal" tabindex="-1" aria-labelledby="confirmTitle">...</div>

html

Form Validation

<label for="email" class="form-label">Email</label>
<input id="email" type="email" class="form-control" required>
<div class="invalid-feedback">Enter a valid email.</div>

Useful Recipes

Spacing and Display

Use the spacing scale consistently.

mt-3 p-4 gap-2
d-none d-md-block
w-100 max-width utilities
text-truncate

css

Theme Variables

Prefer Bootstrap variables or Sass customization over overrides.

:root {
  --bs-primary: #2563eb;
  --bs-border-radius: .75rem;
}

Pitfalls & Production

javascript

JavaScript Components

Import only the components you use when bundle size matters.

import Modal from 'bootstrap/js/dist/modal';
const modal = Modal.getOrCreateInstance(element);

Override Conflicts

Follow a predictable customization layer.

custom theme variables
component classes
utility classes
!important only as a last resort