Borders

Use the border classes to add or remove borders from an element:

Borders

Use a contextual border color to add a color to the border:

Borders

Round the corner of an element with the rounded classes:

Float

Float an element to the right with the .float-right class or to the left with .float-left, and clear floats with the .clearfix class.

Float left Float right

Responsive Floats

Float an element to the left or to the right depending on screen width, with the responsive float classes .float-*-left|right (where * is sm, md, lg or xl).

Resize the browser window to see the effect.

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float none

Horizontal Centering

Center an element with the .mx-auto class:

Centered

Width Utilities

Set the width of an element with the w-* classes:

Width 25%

Width 50%

Width 75%

Width 100%

Max Width 100%

Height Utilities

Set the height of an element with the h-* classes:

Height 25%

Height 50%

Height 75%

Height 100%

Max Height 100%

Spacing Utilities

Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.

I only have a top padding (1.5rem = 24px)

I have a padding on all sides (3rem = 48px)

I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)

Shadows

Use the shadow- classes to to add shadows to an element:

No shadow

Small shadow

Default shadow

Large shadow

Display Utilities

To create a block element, add the d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width.

Resize the browser window to see the effect.

d-block d-sm-block d-md-block d-lg-block d-xl-block