Julia Shlykova

Posted on Jul 3

Cheat Sheet for Bootstrap. Utilities and helpers

#bootstrap

Sizing
Spacing
Text
Background
Borders
Text color
Display
Position
Color & background
Colored links
Stacks
Stretched link
Text truncation
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.

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).

DEV Community