Bootstrap: Utilities & Customization

Spacing & Sizing Utilities

<!-- Spacing: m=margin, p=padding; t/b/s/e/x/y=top/bottom/start/end/x-axis/y-axis -->
<!-- Sizes: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem, auto -->

<div class="mt-3 mb-5 px-4 py-2">spacing</div>
<div class="m-auto" style="width: 200px">horizontally centered block</div>
<div class="ms-auto">push to end in flex container</div>

<!-- Sizing -->
<div class="w-50">50% width of parent</div>
<div class="w-100">Full width</div>
<div class="h-100">Full height</div>
<img class="mw-100">  <!-- max-width: 100% -->

<!-- Overflow -->
<div class="overflow-auto" style="max-height: 200px">scrollable</div>
<div class="overflow-hidden">clipped</div>

Typography & Color Utilities

<!-- Text -->
<p class="text-center">Centered</p>
<p class="text-end">Right aligned</p>
<p class="text-start text-md-center">Left on mobile, centered on md+</p>
<p class="fw-bold">Bold</p>
<p class="fw-light">Light</p>
<p class="fst-italic">Italic</p>
<p class="text-decoration-underline">Underline</p>
<p class="text-uppercase">uppercase</p>
<p class="text-truncate" style="width: 200px">Long text that gets truncated...</p>
<p class="fs-1">Largest (h1 size)</p>
<p class="fs-6">Smallest (h6 size)</p>

<!-- Colors (text) -->
<p class="text-primary">Primary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-muted">Muted (secondary text)</p>
<p class="text-body-secondary">Body secondary</p>

<!-- Background -->
<div class="bg-primary text-white p-3">Primary background</div>
<div class="bg-light p-3">Light background</div>
<div class="bg-body-tertiary p-3">Subtle background (bs5.3+)</div>

<!-- Display -->
<div class="d-none d-md-block">Hidden on mobile, visible on md+</div>
<div class="d-block d-md-none">Visible on mobile, hidden on md+</div>
<span class="d-inline-block">inline-block</span>

Customization with Sass

// 1. Override Bootstrap variables BEFORE importing Bootstrap
// custom.scss

// Theme colors
$primary:   #6f42c1;   // purple
$secondary: #6c757d;
$success:   #198754;

// Spacing scale (default: 1rem)
$spacer: 1.25rem;

// Border radius
$border-radius:    0.5rem;
$border-radius-lg: 1rem;

// Fonts
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;

// Grid
$grid-gutter-width: 2rem;

// 2. Import Bootstrap
@import 'bootstrap/scss/bootstrap';

// 3. Add your custom styles after
.btn {
  font-weight: 500;
  letter-spacing: 0.025em;
}

// Generate additional utility classes
.text-purple { color: $primary; }

// Use Bootstrap mixins
.my-component {
  @include media-breakpoint-up(md) {
    display: flex;
  }
  @include border-radius($border-radius-lg);
}

JavaScript API

// Initialize components programmatically
import { Modal, Tooltip, Toast, Collapse } from 'bootstrap'

// Modal
const modal = new Modal('#myModal', { backdrop: 'static', keyboard: false })
modal.show()
modal.hide()
modal.toggle()

// Events
document.getElementById('myModal').addEventListener('shown.bs.modal', () => {
  console.log('modal shown')
})

// Tooltip (must initialize manually)
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]')
tooltips.forEach(el => new Tooltip(el))

// Toast
const toastEl = document.getElementById('toast')
const toast = new Toast(toastEl, { delay: 3000 })
toast.show()

// Offcanvas
import { Offcanvas } from 'bootstrap'
const offcanvas = new Offcanvas('#sidebar')
offcanvas.show()