Cheat Sheet for Bootstrap. Utilities and helpers
Tags: bootstrap
Published: 2024-07-03 11:53:30

## Table of contents

1. [Sizing](#sizing)
2. [Spacing](#spacing)
3. [Text](#text)
4. [Background](#background)
5. [Borders](#borders)
6. [Text color](#text-color)
7. [Display](#display)
8. [Position](#position)
9. [Color & background](#color-amp-background)
10. [Colored links](#colored-links)
11. [Stacks](#stacks)
12. [Stretched link](#stretched-link)
13. [Text truncation](#text-truncation)
14. [Visually hidden](#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](https://getbootstrap.com/docs/5.3/customize/color).

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:

```html
<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.
{% codepen https://codepen.io/juliashlykova/pen/bGJyXPw %}

### 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:
 {% codepen https://codepen.io/juliashlykova/pen/ExJBYvM %}

## 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:

```html
<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](https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss). It uses [relative luminance](https://en.wikipedia.org/wiki/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.

```html
<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:

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