bottom
Sets the bottom offset of a positioned element. Only works with position relative, absolute, fixed, or sticky.
Class Patterns
Set values with b{N}{unit}. Use neg-b{N}{unit} for negative values.
Caution: Distinguishing from border classes
b1pxsolid000000 is border shorthand. Unit directly after = bottom; border format (size+style+color) = border.
| Class | CSS | Description |
|---|---|---|
b0 | bottom: 0 | Sticks to bottom |
b8px | bottom: 8px | 8px above bottom |
b16px | bottom: 16px | 16px above bottom |
b2rem | bottom: 2rem | 20px above bottom |
b5rem | bottom: 5rem | 50px above bottom |
b50p | bottom: 50% | 50% of parent height above |
ba | bottom: auto | Default (auto) |
neg-b2rem | bottom: -2rem | 20px below bottom edge |
Visual Comparison
Check how elements move by bottom value inside a positioned parent.
Comparing absolute element bottom offsets
b0 sticks to bottom; larger values move upward
Class Details
b{N}{unit}bottom: {value}
Sets distance from the bottom reference point. Supports px, rem, % units.
<!-- Bottom fixed bar -->
<div class="pf b0 l0 w100p bg18181B py16px px2rem zi50">
Bottom fixed footer bar
</div>
<!-- Bottom right floating button (FAB) -->
<button class="pf b2rem r2rem w5-6rem h5-6rem br100p bg6366F1 cFFFFFF bn cp df jcc aic zi50 fs2rem">
+
</button>
<!-- Absolute bottom placement -->
<div class="pr h20rem bg27272A br8px">
<div class="pa b0 l0 r0 bg18181B p16px tac cFFFFFF">
Fixed area at the bottom
</div>
</div>babottom: auto
Resets bottom to default (auto). Useful for clearing bottom at specific breakpoints.
<!-- Responsive: disable bottom on mobile -->
<div class="pa b2rem sm-ba sm-pr">
absolute on desktop + bottom: 2rem
position reset on mobile
</div>neg-b{N}{unit}bottom: -{value}
Sets negative bottom value. Moves element below parent's bottom edge.
<!-- Element protruding below -->
<div class="pr mb4rem bg18181B p2rem br8px">
<div class="pa neg-b2rem l50p bg6366F1 cFFFFFF py8px px16px br4px fs14px">
Overflows downward
</div>
Card Content
</div>Tips & Notes
position required
bottom doesn't work with position: static (default). Must use pr, pa, pf, or ps.
Fixed bottom element pattern
pf b0 l0 w100p for fixed bottom bars (footer, cookie banner, etc.).
Setting both top and bottom
Setting both top and bottom stretches element height. pa t0 b0 takes full parent height.