Utility Classes
Utility classes are the Bootstrap way to modify and customize elements on the page without writing your own CSS
- While Bootstrap stacks are normally customized via numerous settings in Stacks, at any point, you can always use utility classes in addition via the classes property, that every Bootstrap stack is equipped with
- This allows for missing customization or more fine-grained control
- For more complex components, there are multiple classes properties available
*[code-slash] Naming Conventions ^naming-conventions
Utility classes follow a naming convention like this:
property-breakpoint-value
where property is the aspect to be addressed, an optional breakpoint determines the screen size applicability and finally the property value. Breakpoints only apply to certain properties. You can add utility classes to every Bootstrap 5 and most StackApps stacks via the classes property.
Example:
<div class="mt-md-3 d-none d-md-block">Visible from md and up with a top margin of 3</div>
*[arrows-collapse-vertical] Breakpoints #
Breakpoints are used in combination with various utility classes (marked as responsive) in order to achieve a responsive layout. In case you are not sure, if a breakpoint applies to a specific property and its respective utility class, look it up in the documentation.
| Prefix | Applies |
|---|---|
| no prefix | < 576px |
sm |
≥ 576px |
md |
≥ 768px |
lg |
≥ 992px |
xl |
≥ 1200px |
xxl |
≥ 1400px |
*[arrow-bar-left] Margins & Paddings (responsive) ^margin-padding #
Margins and paddings can be applied to almost all elements of the page overwriting standard margins and paddings of the element. Stick to the default setting wherever possible and only tweak it if necessary.
| Direction | Class | Example |
|---|---|---|
| All sides | m-*-*, p-*-* |
m-sm-3, p-sm-2 |
| Top | mt-*-*, pt-*-* |
mt-sm-4, pt-sm-1 |
| Bottom | mb-*-*, pb-*-* |
mb-sm-5, pb-sm-3 |
| Start (Left) | ms-*-*, ps-*-* |
ms-sm-2, ps-sm-4 |
| End (Right) | me-*-*, pe-*-* |
me-sm-1, pe-sm-3 |
| X-Axis | mx-*-*, px-*-* |
mx-sm-auto, px-sm-5 |
| Y-Axis | my-*-*, py-*-* |
my-sm-3, py-sm-2 |
Breakpoints: (optional) sm, md, lg, xl, xxl
Width: 0, 1, 2, 3, 4, 5, 6, 7, auto
*[fonts:1.1x] Text (responsive) ^text #
Text utility classes make up for most of the text styling, allowing you to modify styles without using CSS or other means. No matter what, use it wisely and do not work against global styles just for the sake of being different.
| Property | Class |
|---|---|
| Alignment | text-start, text-center, text-end, text-justify |
| Color | see Text Colors and Text Background Colors section below |
| Size | fs-1, fs-2, ... ,fs-7, fs-8 including breakpoints e.g. fs-md-5 |
| Weight | fw-lighter, fw-light, fw-normal, fw-medium, fw-semibold, fw-bolder , fw-bold |
| Italic | fst-italic, fst-normal |
| Height | lh-1, lh-sm, lh-base, lh-lg |
| Decoration | text-decoration-underline, text-decoration-line-through, text-decoration-none |
| Shadow | text-shadow-sm, text-shadow , text-shadow-lg |
| Transform | text-lowercase, text-uppercase, text-capitalize |
| Mono | font-monspace |
| Wrap | text-wrap, text-nowrap, text-break |
| Reset | text-reset |
*[palette:0.9x] Color
Text Color #
Text color utility classes are applicable to every element. Make sure colors you choose also work with dark themes the same way they do with bright themes. *[circle-half:sm] marked colors are theme aware.
| Class | Description |
|---|---|
text-primary |
Primary text |
text-secondary |
Secondary text |
text-success |
Success text |
text-danger |
Danger text |
text-warning |
Warning text |
text-info |
Info text |
text-light |
Light text |
text-dark |
Dark text |
text-*-emphasis |
Emphasis text color variants *[circle-half:sm] |
text-muted |
Muted text |
text-black |
Black text |
text-white |
White text |
text-black-50 |
Black 50 text |
text-white-50 |
White 50 text |
text-body |
Body text *[circle-half:sm] |
text-body-secondary |
Body secondary text *[circle-half:sm] |
text-body-tertiary |
Body tertiary text *[circle-half:sm] |
Background Color #
Background color utility classes are applicable to every element. Make sure colors you choose also work with dark themes the same way they do with bright themes. *[circle-half:sm] marked colors are theme aware.
| Class | Description |
|---|---|
bg-primary |
Primary background |
bg-secondary |
Secondary background |
bg-success |
Success background |
bg-danger |
Danger background |
bg-warning |
Warning background |
bg-info |
Info background |
bg-light |
Light background |
bg-dark |
Dark background |
bg-*-subtle |
Subtle background color variants *[circle-half:sm] |
bg-body |
Body color background *[circle-half:sm] |
bg-body-secondary |
Body secondary color background *[circle-half:sm] |
bg-body-tertiary |
Body tertiary color background *[circle-half:sm] |
bg-black |
Black background |
bg-white |
White background |
bg-transparent |
Transparent background |
bg-gradient |
Gradient background switch |
Text & Background Color #
Text background color utility classes are applicable to every element. They combine both the text and the background color making sure that text is always readable across light and dark theme.
| Class | Description |
|---|---|
text-bg-primary |
Primary text background |
text-bg-secondary |
Secondary text background |
text-bg-success |
Success text background |
text-bg-danger |
Danger text background |
text-bg-warning |
Warning text background |
text-bg-info |
Info text background |
text-bg-light |
Light text background |
text-bg-dark |
Dark text background |
Table Background Color #
Table background color utility classes are applicable to the table and rows. Other than the cell backround colors they do not change based on the theme.
| Class | Description |
|---|---|
table-primary |
Primary table background |
table-secondary |
Secondary table background |
table-success |
Success table background |
table-danger |
Danger table background |
table-warning |
Warning table background |
table-info |
Info table background |
table-light |
Light table background |
table-dark |
Dark table background |
Link Color #
Colored links with hover states. *[circle-half:sm] marked colors are theme aware.
| Class | Description |
|---|---|
link-primary |
Primary link |
link-secondary |
Secondary link |
link-success |
Success link |
link-danger |
Danger link |
link-warning |
Warning link |
link-info |
Info link |
link-light |
Light link |
link-dark |
Dark link |
link-body-emphasis |
Emphasis link *[circle-half:sm] |
Border Color #
Change the border color using utilities built on our theme colors. *[circle-half:sm] marked colors are theme aware.
| Class | Description |
|---|---|
border |
Standard border *[circle-half:sm] |
border-transparent |
Transparent border |
border-primary |
Primary border |
border-primary-subtle |
Primary subtle border *[circle-half:sm] |
border-secondary |
Secondary border |
border-secondary-subtle |
Secondary subtle border *[circle-half:sm] |
border-success |
Success border |
border-success-subtle |
Success subtle border *[circle-half:sm] |
border-danger |
Danger border |
border-danger-subtle |
Danger subtle border *[circle-half:sm] |
border-warning |
Warning border |
border-warning-subtle |
Warning subtle border *[circle-half:sm] |
border-info |
Info border |
border-info-subtle |
Info subtle border *[circle-half:sm] |
border-light |
Light border |
border-light-subtle |
Light subtle border *[circle-half:sm] |
border-dark |
Dark border |
border-dark-subtle |
Dark subtle border *[circle-half:sm] |
border-white |
White border |
border-black |
Black border |
*[border-width:0.9x] Border (responsive) ^border #
Well, its borders in the end.
| Class | Description |
|---|---|
border |
Add border |
border-0 |
Remove border |
border-1, border-2, ... |
Border width |
border-top, border-bottom, border-start, border-end |
Specific sides |
border-primary, border-success, etc. |
see Border Colors section above |
border-*-*-* |
Border using breakpoint, side and width |
rounded-*-*-* |
Border radius using breakpoint, side and radius |
Breakpoints (optional, non-standard): sm, md, lg, xl, xxl
Side: start, top, end, bottom
Width: 0, 1, 2, 3, 4, 5
Radius: 0, 1, 2, 3, 4, 5, 6, 7, pill, circle
*[display:0.9x] Display (responsive) ^display #
Display classes are sometimes necessary to show and hide certain elements under certain conditions like screen size. Use it as a last resort in case the responsive design can not be achieved otherwise. Don't confuse it with the visibility classes below.
| Class | Description |
|---|---|
d-none |
Hide element |
d-inline |
Inline element |
d-inline-block |
Inline block |
d-block |
Block element |
d-grid |
Grid container |
d-flex |
Flex container |
d-inline-flex |
Inline flex container |
d-*-block, d-*-none, etc. |
Responsive using a breakpoint |
*[bounding-box-circles:0.9x] Flexbox (responsive) ^flexbox #
Flexbox classes are very low level attributes to modify the layout behaviour of the flexbox design. Make sure you understand what you are doing before injecting them into your code.
| Class | Description |
|---|---|
flex-row, flex-row-reverse |
Horizontal direction & reverse |
flex-column, flex-column-reverse |
Vertical direction & reverse |
justify-content-* |
start, center, end, between, around, evenly |
align-items-* |
start, center, end, baseline, stretch |
align-self-* |
For individual items |
flex-wrap, flex-nowrap, flex-wrap-reverse |
Wrapping |
order-* |
Set item order |
gap-* |
Gap between flex/grid items |
*[bandaid:0.9x] Float & Clearfix ^float-clearfix #
This is an expert setting. Look it up :)
| Class | Description |
|---|---|
float-start, float-end, float-none |
Float control |
clearfix |
Clear floats |
*[arrows-angle-expand:0.9x] Object Fit ^object-fit #
Mostly used with images or other 2 dimentional elements, to determine how the element is rendered on a page in case not everything could be shown due to the aspect ratio.
| Class | Description |
|---|---|
object-fit-contain |
Content scales to fit container, preserving aspect ratio (letterboxing) |
object-fit-cover |
Content covers the entire container, preserving aspect ratio (may crop) |
object-fit-fill |
Content stretches to fill container (may distort) |
object-fit-scale-down |
Content scales down if larger than container, otherwise displays at original size |
object-fit-none |
No scaling |
*[sunglasses] Opacity ^opacity #
When using opacity keep in mind that the content should be readable in any conditions, brightness setting or themes.
| Class | Description |
|---|---|
bg-opacity-90 |
90% background opacity |
bg-opacity-80 |
80% background opacity |
bg-opacity-75 |
75% background opacity |
bg-opacity-50 |
50% background opacity |
bg-opacity-25 |
25% background opacity |
bg-opacity-10 |
10% background opacity |
border-opacity-75 |
75% border opacity |
border-opacity-50 |
50% border opacity |
border-opacity-25 |
25% border opacity |
border-opacity-10 |
10% border opacity |
*[stack-overflow:0.9x] Overflow ^overflow #
Control the scrolling behaviour of the content within a container.
| Class | Description |
|---|---|
overflow-auto, overflow-*-auto |
Scroll if needed, x or y |
overflow-hidden, overflow-*-hidden |
Hide overflow, x or y |
overflow-visible , overflow-*-visible |
Default, x or y |
overflow-scroll, overflow-*-scroll |
Always scroll, x or y |
*[pin:0.9x] Position #
You wanna place certain elements out of the flow or otherwise? Use position classes.
| Class | Description |
|---|---|
position-static |
Default |
position-relative |
Relative positioning |
position-absolute |
Absolute positioning |
position-fixed |
Fixed positioning |
position-sticky |
Sticky positioning |
top-0, bottom-0, start-0, end-0 |
Positioning helpers |
*[shadows:0.9x] Shadow #
Shadows are available, but restrain from overuse them. They are subtle anyway.
| Class | Description |
|---|---|
shadow-none |
No shadow |
shadow-sm |
Small shadow |
shadow |
Regular shadow |
shadow-lg |
Large shadow |
*[eyeglasses:1.0x] Visibility (responsive) ^visibility #
Visibility is similar to display, but just hides the element and doesn't remove it from the page.
| Class | Description |
|---|---|
visible |
Force visible |
invisible |
Hidden but takes space |
*[arrows-move:0.9x] Width & Height (responsive) ^width-height #
Width and height should only be used, if nothing else works, as the general layout rules are made for some reason.
| Property | Class |
|---|---|
| Width | w-10, w-15, ..., w-95, w-100, w-auto |
| Max Width | mw-100 |
| Height | h-25, h-50, h-75, h-100, h-auto |
| Max Height | mh-100 |
| Viewport | vw-100, vh-100 |
*[sort-numeric-down-alt] Z-Index #z-index #
Stacking elements on top of eachother sometimes requires order. make sure your elements are stacked accordingly by setting the index.
| Class | Description |
|---|---|
z-n1 |
z-index: -1 |
z-0 |
z-index: 0 |
z-1 |
z-index: 1 |
z-2 |
z-index: 2 |
z-3 |
z-index: 3 |