Utilities

  1. Components
  2. Utilities

Borders & radius

Define edges with semantic colors and rounded shapes.

border
border border-primary
border border-success rounded-3
border border-info rounded-pill
border-top border-primary border-3

Responsive breakpoints

The standard Bootstrap widths used throughout the project.

Tier Minimum width Example
xs 0 col-12
sm 576px col-sm-6
md 768px col-md-4
lg 992px col-lg-3
xl 1200px col-xl-2
xxl 1400px col-xxl-2

Background Colors

Explore the theme palette with compact swatches and clear utility labels.

primary
.bg-primary
secondary
.bg-secondary
success
.bg-success
danger
.bg-danger
warning
.bg-warning
info
.bg-info
light
.bg-light
dark
.bg-dark

Use small color accents to distinguish states while keeping the surrounding layout light.

Background outline colors

Light surfaces, colored borders, and matching icons for softer emphasis.

primary
.bg-outline-primary
secondary
.bg-outline-secondary
success
.bg-outline-success
danger
.bg-outline-danger
warning
.bg-outline-warning
info
.bg-outline-info
light
.bg-outline-light
dark
.bg-outline-dark

Use outline colors for subtle icons, supporting details, and quieter emphasis.

Responsive columns

Stack on small screens and split at the medium breakpoint.

col-md-8
col-md-4
col-sm-4
col-sm-4
col-sm-4

CSS grid

Equal-width tracks without fixed pixel widths.

01
02
03
Spans two tracks
06

Spacing

A predictable scale for padding, margins, and gaps.

p-1
p-2
p-3
p-4
p-5

Position & badges

Anchor contextual labels inside a relative container.

Available

Team workspace

A badge stays pinned to the top right.

position-relative + position-absolute

Sizing

Percentage widths that adapt to their parent container.

w-25
w-50
w-75
w-100

Shadows & elevation

Subtle depth for panels and supporting content.

shadow-none
shadow-sm
shadow
shadow-lg

Display & visibility

Change what appears at different screen widths.

Visible below the medium breakpoint.
Visible from the medium breakpoint upward.
d-blockd-inline-flexd-none

Overflow & truncation

Contain long content while keeping the layout stable.

Quarterly workspace performance summary and recommendations for the upcoming product release.

text-truncate

Scrollable content stays within its container.

Project notes, shared documents, and team feedback.

Additional information is available by scrolling.

Layout helpers

Stacks, separators, ratios, and accessible labels.

Draft
ReviewNext
Responsive 21:9 container

visually-hidden keeps supporting text available to screen readers.

Additional utilities

Opacity, selection, and readable text treatment.

25%50%75%100%

Click to select this entire sample with user-select-all.

UppercaseUnderlineItalic text

Z-index

Control which positioned elements appear above others.

Back layer
z-1
Middle layer
z-2
Front layer
z-3

Combine z-0 through z-3 with a positioned element. Use z-n1 for a negative layer.

Object Fit

Compare how the same image fills a fixed-size frame.

Mountain lake demonstrating object-fit cover
object-fit-cover
Mountain lake demonstrating object-fit contain
object-fit-contain
Mountain lake demonstrating object-fit fill
object-fit-fill
Mountain lake demonstrating object-fit scale-down
object-fit-scale-down
Mountain lake demonstrating object-fit none
object-fit-none

Background Opacity

Soften the background while keeping text and icons fully visible.

10%Background only
bg-opacity-10
25%Background only
bg-opacity-25
50%Background only
bg-opacity-50
75%Background only
bg-opacity-75
100%Background only
bg-opacity-100

Use bg-primary bg-opacity-25 for subtle emphasis. Colors follow the project's theme opacity scale.