Borders Colors Others Spacing Text
Styles

Border additive (borders_border)

Use it to add an element’s borders. Choose from all borders or one at a time.

All (border)

Top (border-top)

Right (border-right)

Bottom (border-bottom)

Left (border-left)
<p class="border p-2 bg-light">All (border)</p> <p class="border-top p-2 bg-light">Top (border-top)</p> <p class="border-right p-2 bg-light">Right (border-right)</p> <p class="border-bottom p-2 bg-light">Bottom (border-bottom)</p> <p class="border-left p-2 bg-light">Left (border-left)</p>

Border subtractive (borders_border_substractive)

Use it to remove an element’s borders. Choose from all borders or one at a time.

All (border-0)

Top (border-top-0)

Right (border-right-0)

Bottom (border-bottom-0)

Left (border-left-0)
<p class="border-0 border p-2 bg-light">All (border-0)</p> <p class="border-top-0 border p-2 bg-light">Top (border-top-0)</p> <p class="border-right-0 border p-2 bg-light">Right (border-right-0)</p> <p class="border-bottom-0 border p-2 bg-light">Bottom (border-bottom-0)</p> <p class="border-left-0 border p-2 bg-light">Left (border-left-0)</p>

Border color (borders_border_color)

Change the border color using utilities built on our theme colors.

Primary (border-primary)

Secondary (border-secondary)

Success (border-success)

Danger (border-danger)

Warning (border-warning)

Info (border-info)

Light (border-light)

Dark (border-dark)

White (border-white)
<p class="border-primary border p-2 bg-light">Primary (border-primary)</p> <p class="border-secondary border p-2 bg-light">Secondary (border-secondary)</p> <p class="border-success border p-2 bg-light">Success (border-success)</p> <p class="border-danger border p-2 bg-light">Danger (border-danger)</p> <p class="border-warning border p-2 bg-light">Warning (border-warning)</p> <p class="border-info border p-2 bg-light">Info (border-info)</p> <p class="border-light border p-2 bg-light">Light (border-light)</p> <p class="border-dark border p-2 bg-light">Dark (border-dark)</p> <p class="border-white border p-2 bg-light">White (border-white)</p>

Border radius (borders_border_radius)

Add classes to an element to easily round its corners.

Rounded (rounded)

Rounded Top (rounded-top)

Rounded Right (rounded-right)

Rounded Bottom (rounded-bottom)

Rounded Left (rounded-left)

Rounded Circle (rounded-circle)

Rounded Subtractive (rounded-0)
<p class="rounded border p-2 bg-light">Rounded (rounded)</p> <p class="rounded-top border p-2 bg-light">Rounded Top (rounded-top)</p> <p class="rounded-right border p-2 bg-light">Rounded Right (rounded-right)</p> <p class="rounded-bottom border p-2 bg-light">Rounded Bottom (rounded-bottom)</p> <p class="rounded-left border p-2 bg-light">Rounded Left (rounded-left)</p> <p class="rounded-circle border p-2 bg-light">Rounded Circle (rounded-circle)</p> <p class="rounded-0 border p-2 bg-light">Rounded Subtractive (rounded-0)</p>

Background color (colors_background_color)

Similar to the contextual text color classes, easily set the background of an element to any contextual class.

Primary (bg-primary)

Secondary (bg-secondary)

Success (bg-success)

Danger (bg-danger)

Warning (bg-warning)

Info (bg-info)

Light (bg-light)

Dark (bg-dark)

White (bg-white)

Transparent (bg-transparent)
<p class="bg-primary border p-2">Primary (bg-primary)</p> <p class="bg-secondary border p-2">Secondary (bg-secondary)</p> <p class="bg-success border p-2">Success (bg-success)</p> <p class="bg-danger border p-2">Danger (bg-danger)</p> <p class="bg-warning border p-2">Warning (bg-warning)</p> <p class="bg-info border p-2">Info (bg-info)</p> <p class="bg-light border p-2">Light (bg-light)</p> <p class="bg-dark border p-2 text-light">Dark (bg-dark)</p> <p class="bg-white border p-2">White (bg-white)</p> <p class="bg-transparent border p-2">Transparent (bg-transparent)</p>

Color (colors_color)

Convey meaning through color with a handful of color utility classes.

Primary (text-primary)

Secondary (text-secondary)

Success (text-success)

Danger (text-danger)

Warning (text-warning)

Info (text-info)

Light (text-light)

Dark (text-dark)

Body (text-body)

Muted (text-muted)

White (text-white)

Black 50 (text-black-50)

White 50 (text-white-50)
<p class="text-primary">Primary (text-primary)</p> <p class="text-secondary">Secondary (text-secondary)</p> <p class="text-success">Success (text-success)</p> <p class="text-danger">Danger (text-danger)</p> <p class="text-warning">Warning (text-warning)</p> <p class="text-info">Info (text-info)</p> <p class="text-light bg-dark">Light (text-light)</p> <p class="text-dark">Dark (text-dark)</p> <p class="text-body">Body (text-body)</p> <p class="text-muted">Muted (text-muted)</p> <p class="text-white bg-dark">White (text-white)</p> <p class="text-black-50">Black 50 (text-black-50)</p> <p class="text-white-50 bg-dark">White 50 (text-white-50)</p>

Shadows (shadows)

Add or remove shadows to elements with box-shadow utilities.

None (shadow-none)

Small (shadow-sm)

Normal (shadow)

Large (shadow-lg)
<p class="shadow-none border p-2 bg-light m-3">None (shadow-none)</p> <p class="shadow-sm border p-2 bg-light m-3">Small (shadow-sm)</p> <p class="shadow border p-2 bg-light m-3">Normal (shadow)</p> <p class="shadow-lg border p-2 bg-light m-3">Large (shadow-lg)</p>

Horizontal centering (spacing_horizontal_centering)

An .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Horizontal centering (mx-auto)
<p class="mx-auto">Horizontal centering (mx-auto)</p>

Typography (typography)

.h1 through .h6 classes are available, for when you want to match the font styling of a heading but cannot use the associated HTML element. Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default.

Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)

Heading 6 (h6)

Display heading 1 (display-1)

Display heading 2 (display-2)

Display heading 3 (display-3)

Display heading 4 (display-4)

Lead (lead)
<p class="h1">Heading 1 (h1)</p> <p class="h2">Heading 2 (h2)</p> <p class="h3">Heading 3 (h3)</p> <p class="h4">Heading 4 (h4)</p> <p class="h5">Heading 5 (h5)</p> <p class="h6">Heading 6 (h6)</p> <p class="display-1">Display heading 1 (display-1)</p> <p class="display-2">Display heading 2 (display-2)</p> <p class="display-3">Display heading 3 (display-3)</p> <p class="display-4">Display heading 4 (display-4)</p> <p class="lead">Lead (lead)</p>

Margin (spacing_margin)

0 (m-0)

1 (m-1)

2 (m-2)

3 (m-3)

4 (m-4)

5 (m-5)

Auto (m-auto)
<p class="m-0 border p-2 bg-light">0 (m-0)</p> <p class="m-1 border p-2 bg-light">1 (m-1)</p> <p class="m-2 border p-2 bg-light">2 (m-2)</p> <p class="m-3 border p-2 bg-light">3 (m-3)</p> <p class="m-4 border p-2 bg-light">4 (m-4)</p> <p class="m-5 border p-2 bg-light">5 (m-5)</p> <p class="m-auto border p-2 bg-light">Auto (m-auto)</p>

Margin top (spacing_margin_top)

0 (mt-0)

1 (mt-1)

2 (mt-2)

3 (mt-3)

4 (mt-4)

5 (mt-5)

Auto (mt-auto)
<p class="mt-0 border p-2 bg-light">0 (mt-0)</p> <p class="mt-1 border p-2 bg-light">1 (mt-1)</p> <p class="mt-2 border p-2 bg-light">2 (mt-2)</p> <p class="mt-3 border p-2 bg-light">3 (mt-3)</p> <p class="mt-4 border p-2 bg-light">4 (mt-4)</p> <p class="mt-5 border p-2 bg-light">5 (mt-5)</p> <p class="mt-auto border p-2 bg-light">Auto (mt-auto)</p>

Margin bottom (spacing_margin_bottom)

0 (mb-0)

1 (mb-1)

2 (mb-2)

3 (mb-3)

4 (mb-4)

5 (mb-5)

Auto (mb-auto)
<p class="mb-0 border p-2 bg-light">0 (mb-0)</p> <p class="mb-1 border p-2 bg-light">1 (mb-1)</p> <p class="mb-2 border p-2 bg-light">2 (mb-2)</p> <p class="mb-3 border p-2 bg-light">3 (mb-3)</p> <p class="mb-4 border p-2 bg-light">4 (mb-4)</p> <p class="mb-5 border p-2 bg-light">5 (mb-5)</p> <p class="mb-auto border p-2 bg-light">Auto (mb-auto)</p>

Margin left (spacing_margin_left)

0 (ml-0)

1 (ml-1)

2 (ml-2)

3 (ml-3)

4 (ml-4)

5 (ml-5)

Auto (ml-auto)
<p class="ml-0 border p-2 bg-light">0 (ml-0)</p> <p class="ml-1 border p-2 bg-light">1 (ml-1)</p> <p class="ml-2 border p-2 bg-light">2 (ml-2)</p> <p class="ml-3 border p-2 bg-light">3 (ml-3)</p> <p class="ml-4 border p-2 bg-light">4 (ml-4)</p> <p class="ml-5 border p-2 bg-light">5 (ml-5)</p> <p class="ml-auto border p-2 bg-light">Auto (ml-auto)</p>

Margin right (spacing_margin_right)

0 (mr-0)

1 (mr-1)

2 (mr-2)

3 (mr-3)

4 (mr-4)

5 (mr-5)

Auto (mr-auto)
<p class="mr-0 border p-2 bg-light">0 (mr-0)</p> <p class="mr-1 border p-2 bg-light">1 (mr-1)</p> <p class="mr-2 border p-2 bg-light">2 (mr-2)</p> <p class="mr-3 border p-2 bg-light">3 (mr-3)</p> <p class="mr-4 border p-2 bg-light">4 (mr-4)</p> <p class="mr-5 border p-2 bg-light">5 (mr-5)</p> <p class="mr-auto border p-2 bg-light">Auto (mr-auto)</p>

Padding (spacing_padding)

0 (p-0)

1 (p-1)

2 (p-2)

3 (p-3)

4 (p-4)

5 (p-5)

Auto (p-auto)
<p class="p-0 border bg-light">0 (p-0)</p> <p class="p-1 border bg-light">1 (p-1)</p> <p class="p-2 border bg-light">2 (p-2)</p> <p class="p-3 border bg-light">3 (p-3)</p> <p class="p-4 border bg-light">4 (p-4)</p> <p class="p-5 border bg-light">5 (p-5)</p> <p class="p-auto border bg-light">Auto (p-auto)</p>

Padding top (spacing_padding_top)

0 (pt-0)

1 (pt-1)

2 (pt-2)

3 (pt-3)

4 (pt-4)

5 (pt-5)

Auto (pt-auto)
<p class="pt-0 border bg-light">0 (pt-0)</p> <p class="pt-1 border bg-light">1 (pt-1)</p> <p class="pt-2 border bg-light">2 (pt-2)</p> <p class="pt-3 border bg-light">3 (pt-3)</p> <p class="pt-4 border bg-light">4 (pt-4)</p> <p class="pt-5 border bg-light">5 (pt-5)</p> <p class="pt-auto border bg-light">Auto (pt-auto)</p>

Padding bottom (spacing_padding_bottom)

0 (pb-0)

1 (pb-1)

2 (pb-2)

3 (pb-3)

4 (pb-4)

5 (pb-5)

Auto (pb-auto)
<p class="pb-0 border bg-light">0 (pb-0)</p> <p class="pb-1 border bg-light">1 (pb-1)</p> <p class="pb-2 border bg-light">2 (pb-2)</p> <p class="pb-3 border bg-light">3 (pb-3)</p> <p class="pb-4 border bg-light">4 (pb-4)</p> <p class="pb-5 border bg-light">5 (pb-5)</p> <p class="pb-auto border bg-light">Auto (pb-auto)</p>

Padding left (spacing_padding_left)

0 (pl-0)

1 (pl-1)

2 (pl-2)

3 (pl-3)

4 (pl-4)

5 (pl-5)

Auto (pl-auto)
<p class="pl-0 border bg-light">0 (pl-0)</p> <p class="pl-1 border bg-light">1 (pl-1)</p> <p class="pl-2 border bg-light">2 (pl-2)</p> <p class="pl-3 border bg-light">3 (pl-3)</p> <p class="pl-4 border bg-light">4 (pl-4)</p> <p class="pl-5 border bg-light">5 (pl-5)</p> <p class="pl-auto border bg-light">Auto (pl-auto)</p>

Padding right (spacing_padding_right)

0 (pr-0)

1 (pr-1)

2 (pr-2)

3 (pr-3)

4 (pr-4)

5 (pr-5)

Auto (pr-auto)
<p class="pr-0 border bg-light text-right">0 (pr-0)</p> <p class="pr-1 border bg-light text-right">1 (pr-1)</p> <p class="pr-2 border bg-light text-right">2 (pr-2)</p> <p class="pr-3 border bg-light text-right">3 (pr-3)</p> <p class="pr-4 border bg-light text-right">4 (pr-4)</p> <p class="pr-5 border bg-light text-right">5 (pr-5)</p> <p class="pr-auto border bg-light text-right">Auto (pr-auto)</p>

Font weight (text_font_weight)

Quickly change the weight (boldness) of text.

Bold (font-weight-bold)

Normal (font-weight-normal)

Light (font-weight-light)
<p class="font-weight-bold">Bold (font-weight-bold)</p> <p class="font-weight-normal">Normal (font-weight-normal)</p> <p class="font-weight-light">Light (font-weight-light)</p>

Font italics (text_font_italics)

Quickly italicize text.

Italic (font-italic)
<p class="font-italic">Italic (font-italic)</p>

Text alignment (text_text_alignment)

Easily realign text to components with text alignment classes.

Justify (text-justify)

Left (text-left)

Center (text-center)

Right (text-right)
<p class="text-justify border p-2 bg-light">Justify (text-justify)</p> <p class="text-left border p-2 bg-light">Left (text-left)</p> <p class="text-center border p-2 bg-light">Center (text-center)</p> <p class="text-right border p-2 bg-light">Right (text-right)</p>

Text transform (text_text_transform)

Transform text in components with text capitalization classes.

Lowercase (text-lowercase)

Uppercase (text-uppercase)

Capitalize (text-capitalize)
<p class="text-lowercase">Lowercase (text-lowercase)</p> <p class="text-uppercase">Uppercase (text-uppercase)</p> <p class="text-capitalize">Capitalize (text-capitalize)</p>