Cheat Sheet for Bootstrap. Utilities and helpers

Table of contents

1. Sizing
2. Spacing
3. Text
4. Background
5. Borders
6. Text color
7. Display
8. Position
9. Color & background
10. Colored links
11. Stacks
12. Stretched link
13. Text truncation
14. Visually hidden

Sizing

Relative to the parent

We can set the following classes for child element to control its' width:

• .w-25 - means 25% of the parent's width;
• .w-50;
• .w-75;
• .w-100;
• .w-auto

The same values go for .h-* class.
We can also set max-widht: 100% with .mw-100 and max-height: 100% with .mh-100.

Relative to viewport

• .vw-100 - width is 100vw;
• .vh-100 - height is 100vh;
• .min-vw-100 - min-width is 100vw;
• .min-vh-100 - min-height is 100vw;

Spacing

Margin and padding

Classes names are constructed using {property}{sides}-{size}, where

property:

• m - for margin;
• p - for padding.

sides:

• t - top;
• b - bottom;
• s - start(left);
• e - end(right);
• x - left and right;
• y - top and bottom.

size:

$spacer variable is defined in scss/_variables.scss and equals to 1rem

• 1 = $spacer * .25;
• 2 = $spacer * .5;
• 3 = $spacer;
• 4 = $spacer * 1.5;
• 5 = $spacer * 3;
• auto

We can also define margin and padding for breakpoints: {property}{sides}-{breakpoint}-{size}.

Horizontal centering

If an element is displayed as block, we can center horizontally by applying .mx-auto class.

Gap

For grid and flex we can apply .gap-*, .row-gap-* and .column-gap-* classes.

Text

Text alignment

• .text-{breakpoint}-start
• .text-{breakpoint}-center
• .text-{breakpoint}-end

Word break

.text-break class sets word-wrap: break-word.

Text transform

• .text-lowercase
• .text-uppercase
• .text-capitalize

Background

To see how each color looks and the meaning stands for the name visit.

We can set predefined background colors applying .bg-* classes:

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

For each of upper classes we can add *-subtle to make a class with more subtle background color like .bg-primary-subtle

• .bg-body-secondary;
• .bg-body-tertiary;
• .bg-body;
• .bg-black;
• .bg-white;
• .bg-transparent;

We can add .bg-gradient class to background color class - it results into semi-transparent top and fully colored bottom (ex. .bg-success.bg-gradient).

To add opacity to predefined background color, we should override --bs-bg-opacity variable in inline style:

<div class="bg-primary" style="--bs-bg-opacity: .5;">
  This is 50% opacity success background
</div>

Borders

• .border - all four edges;
• .border-* - only specific edge (top, bottom, etc.);
• .border-0 - remove all borders;
• .border-*-0 - remove specific edge;

Color

We can use the same keywords as in background colors (primary, danger, warning) for border color, using .border-* class.

Width

To set width of border we need .border-{number-of-pixels} class. There are only 1-5 values available.

Radius

• .rounded-{scale} - scale is in range from 1 to 5;
• .rounded - a little rounded border;
• .rounded-top - top angles are rounded;
• .rounded-bottom;
• .rounded-start;
• .rounded-end;
• .rounded-circle;
• .rounded-pill.

We can combine these classes:

• .rounded-5.rounded-top-0 - top angles are not rounded;
• .rounded-end-circle - only right angles are rounded with 50% value.

Text color

Class .text-* has the same keywords as .bg-* class. However, instead of -subtle postfix there is -emphasis that means darker color:

Display

.d-* allows almost all CSS display rules:

• .d-none
• .d-inline
• .d-inline-block
• .d-block
• .d-grid
• .d-inline-grid
• .d-table
• .d-table-cell
• .d-table-row
• .d-flex
• .d-inline-flex

To set different display after certain breakpoint we can use .d-{breakpoint}-* class.

Flex

For flexbox we can set direction:

<div class="d-flex flex-row"></div>
<div class="d-flex flex-sm-row"></div>
<div class="d-flex flex-column-reverse"></div>

For wrapping we apply .flex-wrap.

We can also apply align items inside flex using .justify-content-{breakpoint}-* and .align-items-{breakpoint}-* where * is value in CSS corresponding rules.
For individual alignment we should use .align-self-{breakpoint}-*.

Position

To set position we use .position-* class, where * can be relative, absolute etc.

To arrange elements we use:

• .top-{0/50/100}, where 50 means 50% edge position;
• .start-{0/50/100};
• .bottom-{0/50/100};
• .end-{0/50/100}.

We can center elements applying combination of upper classes and .translate-middle which applies translateX(-50%) and translateY(-50%).

Fast positioning

We can quickly configure the position of an element:

• .fixed-top
• .fixed-bottom
• .sticky-{breakpoint}-top
• .sticky-{breakpoint}-bottom

Color & background

For the predefined background color we can use .text-bg-{primary/secondary/success/etc} class to get contrast text color (either black or white) to background. This class replaces both .text-{color} and .bg-{color}.

Boostrap uses its' own color-contrast function, which we can find in https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss. It uses relative luminance to determine contrast.

Colored links

We can color links and its' underline with .link-{primary/secondary/success/etc} class.

Stacks

• .vstack - flexbox with column direction;
• .hstack - flexbox with row direction;

Stretched link

.stretched-link - class for link which makes containing block clickable.

<div>
  <span>hey</span>
  <a class="stretched-link" href="#">
    link
  </a>
</div>

Here, div element becomes clickable.

Text truncation

For long content sometimes we need to cut it. In CSS we use text-overflow: ellipsis; overflow: hidden; white-space: nowrap; rules which results in .text-truncate bootstrap class:

<span class='text-truncate' style='width:100px;'>
  Contrasting text color to background colory
</span>

//results to 'Contrast...'

Visually hidden

• .visually-hidden - hide an element visually while allowing it to stay exposed to assistive technologies.
• .visually-hidden-focusable - visually hide and element while display when focused (by keyboard-only user).