Position Classes
Add these classes to change an element's position:
position-static, position-fixed, position-absolute,
position-relative, position-sticky
What are CSS
Positions?
-
To fix elements to the top of the page, add
position-fixed top-0, top-1, top-2, top-3, top-4
-
To fix elements to the bottom of the page, add
position-fixed bottom-0, bottom-1, bottom-2, bottom-3, bottom-4
-
To fix elements to the right of the page, add
position-fixed right-0, right-1, right-2, right-3, right-4
-
To fix elements to the left of the page, add
position-fixed left-0, left-1, left-2, left-3, left-4
- For relative placement inside the parent element, use top-25, top-50, top-75, right-25, right-50, right-75
- For placement relative to the viewport, use top-25-vh, top-50-vh, top-75-vh, right-25-vw, right-50-vw, right-75-vw
-
To make an element stick inside its scrolling container, use
position-sticky (combine with a top-* offset)
Display Classes
Add these classes to change an element's display type:
d-none, d-inline, d-inline-block, d-block, d-table, d-table-row, d-table-cell, d-flex,
d-inline-flex, d-grid, d-inline-grid
What are CSS display
types?
- d-grid and d-inline-grid pair with the Grid Column Classes below to build CSS grid layouts
- To hide content visually but keep it available to screen readers, use sr-only instead of d-none (which removes it entirely, including from assistive tech)
Mobile or Desktop Only Classes
Sometimes you want to show an element only on mobile or only on desktop, not both. Add the class
mobile-only or desktop-only
Float and Clear Classes
- To apply or remove float, add float-right, float-left, float-none
- To clear a float, add clear-both, clear-right, clear-left
- To contain a floated element taller than its container, add clear-fix to the container
Overflow & Scroll Classes
- To apply overflow on both axes, add overflow-hidden, overflow-visible
- To apply overflow on the x-axis, add overflow-x-auto, overflow-x-scroll, overflow-x-hidden
- To apply overflow on the y-axis, add overflow-y-auto, overflow-y-scroll, overflow-y-hidden
- To style the scrollbar itself, add scrollbar-none, scrollbar-thin
Z-index Classes
Add these classes to control an element's stacking order:
- Numeric scale: z--1, z-0, z-1, z-2, z-3, z-10, z-100
- Semantic tokens (used internally by dropdowns, sidebars, light-boxes, and modals — reuse them instead of guessing a number): z-floating (100), z-overlay (999), z-modal (1000)
Flex Classes
Add these classes to control the behavior of a flex container and its children.
-
Container direction: flex-row, flex-column, flex-row-reverse, flex-column-reverse,
flex-wrap, flex-nowrap,
flex-wrap-reverse, flex-fill (flex-nowrap goes on the container, not the children)
-
Justify content horizontally: justify-content-start, justify-content-end,
justify-content-center, justify-content-between,
justify-content-around
-
Align items on the cross axis: align-items-start,
align-items-end, align-items-center,
align-items-baseline, align-items-stretch
-
Align content (multi-line containers): align-content-start, align-content-end,
align-content-center,
align-content-between, align-content-around, align-content-stretch
-
Align self (individual item): align-self-auto, align-self-start,
align-self-end,
align-self-center, align-self-baseline, align-self-stretch
-
Grow / shrink individual items: flex-grow-0, flex-grow-1, flex-shrink-0, flex-shrink-1
Gap Classes
Add these classes to a d-flex or d-grid container to space its children without margins:
gap, gap-1, gap-2, gap-3, gap-4, gap-default
- Note: inside the .row / .col-* flex grid, children default to flex-shrink: 0 and min-width: auto, so adding a gap-* class alone can cause overflow. Use the framework's col-gap opt-in class, which pairs flex-shrink-1 with min-width: 0 on the children.
Grid Column Classes
Pair with d-grid or d-inline-grid to lay children out on an even column grid:
grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4, grid-cols-6, grid-cols-12
- Combine with a gap-* class for spacing between grid cells
Aspect Ratio Classes
Add these classes to constrain an element (commonly an image or media wrapper) to a fixed ratio:
aspect-auto, aspect-square, aspect-video, aspect-4-3, aspect-3-2
- aspect-square — 1:1
- aspect-video — 16:9
- aspect-4-3 — 4:3
- aspect-3-2 — 3:2