# Typography

# class="h1" Sub-heading

## class="h2" Sub-heading

### class="h3" Sub-heading

#### class="h4" Sub-heading

##### class="h5" Sub-heading

###### class="h6" Sub-heading

This is an example of small, fine print text.

This is an example of strong, bold text.

This is an example of emphasized, italic text.

#### Alignment & Sizing Helpers

class="text-left text-sm"

class="text-center text-md"

class="text-right text-lg"

class="text-{{color}} bg-{{color}}"

#### text-nowrap

[class="text-nowrap"].Ad eiusmod eu velit veniam laborum voluptate duis aliqua esse eiusmod.

#### text-truncate

[class="text-truncate"].Officia nulla velit minim mollit laborum et irure ullamco nisi dolore qui. Sint aute aliqua tempor commodo officia sunt non do id laborum mollit ex ea cupidatat. Amet ad non fugiat magna. Ut cupidatat labore pariatur esse reprehenderit esse sint in proident elit minim sunt enim sit. Enim sint deserunt exercitation duis. Aliquip cillum irure do incididunt do eu eiusmod excepteur culpa ex consectetur nulla duis sit. Ex officia excepteur officia ea ea cupidatat veniam officia officia est.

#### Transformation

class="text-lowercase"

class="text-uppercase"

class="text-capitalize"

class="text-deleted"

class="border border-primary"
class="border-top-1 border-success rounded-circle"
class="border-bottom-1 border-error"
class="border-right-1 border-warning"
清除间距

`[<类型>p|m][<方向>t|r|b|l|x|y]?0`

eg: p0, pt0, mb0, mt0

间距

`[<类型>p|m][<方向>t|r|b|l|x|y]?-[<尺寸>sm|md|lg]`

eg: p-sm, pb-sm, mt-md, mr-md

class="display-1"

class="display-2"

class="display-3"

This is an example of an inline code element within body copy. Wrap inline code within a `...`tag.

    This is an example of preformatted text.

#### list styled

1. List Item
2. List Item
3. List Item

#### Unstyled List

- List Item
- List Item
- List Item