Utilities

Some of the changes affect how Bootstrap Utilities work, let's take a look.

Arrangement Properties

• {PRO}{POS}

• PRO

top start bottom end

• POS

0 50 100

• TRANSLATE

translate-middle

Position Translate

Where an element sits is relative to a position attribute and we have four sides with three position options we can specify.

There's also an extra property you can use to center elements in each of the corners.

Border Width

• border-{NUM}
  • NUM: 1 2 3 4 5

Try it

There are some border width utilities for for borders from 1 to 5 pixels. By the way, border-1 happens to be the same size as just border. You can also combine these with the contextual colors or sizes, but they will affect all of the borders in the current element.

Radius Sizes

• Removed rounded-sm rounded-lg
• rounded-{NUM}
  • NUM: 0 1 2 3

Try it

A couple of classes were removed for border radius sizes.

If you want a little better control over the roundness of the edges you can use these sizes right here. rounded-0 is the same as not adding rounded, rounded-1 is slightly smaller roundness than just using the rounded class and rounded-3 is slightly bigger.

Gap

• d-grid
• gap-{AMT}

0 1 2 3 4 5

Try it

There's a small addition to the list of display properties called d-grid. It allows you to build simple grids quickly.

There's an additional utility called gap that is only relevant to classes like the display-grid class.

Opacity

• opacity-{AMT}
  • 0 25 50 75 100

Try it

There's a small addition to the list of display properties called d-grid. It allows you to build simple grids quickly.

There's an additional utility called gap that is only relevant to classes like the display-grid class.