Styles

Typography (typography)

Typography styles.

Title 1 (h1)

Title 2 (h2)

Title 3 (h3)

Large (large)

Default (default)

Small (small)

Script (script)

Link (link)

Last line (last-line)

Unordered list item (unordered-list-item)
<p class="h1">Title 1 (h1)</p> <p class="h2">Title 2 (h2)</p> <p class="h3">Title 3 (h3)</p> <p class="large">Large (large)</p> <p class="default">Default (default)</p> <p class="small">Small (small)</p> <p class="script">Script (script)</p> <p class="link">Link (link)</p> <p class="last-line">Last line (last-line)</p> <p class="unordered-list-item">Unordered list item (unordered-list-item)</p>

Text color (text_colors)

Text primary (text-primary)

Text black (text-black)

Text gray (text-gray)
<p class="text-primary">Text primary (text-primary)</p> <p class="text-black">Text black (text-black)</p> <p class="text-gray">Text gray (text-gray)</p>

Background color (background_colors)

White (bg-white)

Black (bg-black)

Gray (bg-gray)
<p class="bg-white">White (bg-white)</p> <p class="bg-black text-gray">Black (bg-black)</p> <p class="bg-gray">Gray (bg-gray)</p>

Margin top (margin_top)

0 (mt-0)

0.5 (mt-0-5)

1 (mt-1)

2 (mt-2)

3 (mt-3)

4 (mt-4)

5 (mt-5)

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

Margin bottom (margin_bottom)

0 (mb-0)

0.5 (mb-0-5)

1 (mb-1)

2 (mb-2)

3 (mb-3)

4 (mb-4)

5 (mb-5)

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

Margin left (margin_left)

0 (ml-0)

0.5 (ml-0-5)

1 (ml-1)

2 (ml-2)

3 (ml-3)

4 (ml-4)

5 (ml-5)

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

Margin right (margin_right)

0 (mr-0)

0.5 (mr-0-5)

1 (mr-1)

2 (mr-2)

3 (mr-3)

4 (mr-4)

5 (mr-5)

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

Padding top (padding_top)

0 (pt-0)

0.5 (pt-0-5)

1 (pt-1)

2 (pt-2)

3 (pt-3)

4 (pt-4)

5 (pt-5)
<p class="pt-0 bg-gray">0 (pt-0)</p> <p class="pt-0-5 bg-gray">0.5 (pt-0-5)</p> <p class="pt-1 bg-gray">1 (pt-1)</p> <p class="pt-2 bg-gray">2 (pt-2)</p> <p class="pt-3 bg-gray">3 (pt-3)</p> <p class="pt-4 bg-gray">4 (pt-4)</p> <p class="pt-5 bg-gray">5 (pt-5)</p>

Padding bottom (padding_bottom)

0 (pb-0)

0.5 (pb-0-5)

1 (pb-1)

2 (pb-2)

3 (pb-3)

4 (pb-4)

5 (pb-5)
<p class="pb-0 bg-gray">0 (pb-0)</p> <p class="pb-0-5 bg-gray">0.5 (pb-0-5)</p> <p class="pb-1 bg-gray">1 (pb-1)</p> <p class="pb-2 bg-gray">2 (pb-2)</p> <p class="pb-3 bg-gray">3 (pb-3)</p> <p class="pb-4 bg-gray">4 (pb-4)</p> <p class="pb-5 bg-gray">5 (pb-5)</p>

Padding left (padding_left)

0 (pl-0)

0.5 (pl-0-5)

1 (pl-1)

2 (pl-2)

3 (pl-3)

4 (pl-4)

5 (pl-5)
<p class="pl-0 bg-gray">0 (pl-0)</p> <p class="pl-0-5 bg-gray">0.5 (pl-0-5)</p> <p class="pl-1 bg-gray">1 (pl-1)</p> <p class="pl-2 bg-gray">2 (pl-2)</p> <p class="pl-3 bg-gray">3 (pl-3)</p> <p class="pl-4 bg-gray">4 (pl-4)</p> <p class="pl-5 bg-gray">5 (pl-5)</p>

Padding right (padding_right)

0 (pr-0)

0.5 (pr-0-5)

1 (pr-1)

2 (pr-2)

3 (pr-3)

4 (pr-4)

5 (pr-5)
<p class="pr-0 bg-gray">0 (pr-0)</p> <p class="pr-0-5 bg-gray">0.5 (pr-0-5)</p> <p class="pr-1 bg-gray">1 (pr-1)</p> <p class="pr-2 bg-gray">2 (pr-2)</p> <p class="pr-3 bg-gray">3 (pr-3)</p> <p class="pr-4 bg-gray">4 (pr-4)</p> <p class="pr-5 bg-gray">5 (pr-5)</p>

Text alignment (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 bg-gray">Justify (text-justify)</p> <p class="text-left bg-gray">Left (text-left)</p> <p class="text-center bg-gray">Center (text-center)</p> <p class="text-right bg-gray">Right (text-right)</p>

Text transform (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>

Italic (italic)

Quickly italicize text.

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

Font weight (font-weight)

Quickly change text weight.

Normal (fw-normal)

Bold (fw-bold)
<p class="fw-normal">Normal (fw-normal)</p> <p class="fw-bold">Bold (fw-bold)</p>

Overflow wrap (overflow_wrap)

Change of the overflow wrap.

Normal (ow-normal)

Anywhere (ow-anywhere)

Break word (ow-break-word)
<p class="ow-normal">Normal (ow-normal)</p> <p class="ow-anywhere">Anywhere (ow-anywhere)</p> <p class="ow-break-word">Break word (ow-break-word)</p>