Typography
Headings
Add tags <h1> to <h6> or class .h1 to .h6
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
Headings with secondary text
Add faded secondary text to headings
h1. Heading Secondary text
h2. Heading Secondary text
h3. Heading Secondary text
h4. Heading Secondary text
h5. Heading Secondary text
h6. Heading Secondary text
Display headings
Add class .display1 to .display-4
Display 1
Display 2
Display 3
Display 4
Paragraph
Write text in <p> tag
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley not only five centuries,
Icon size
Add class .icon-lg, .icon-md, .icon-sm
Icon-lg
Icon-md
Icon-sm
Blockquotes
Wrap content inside<blockquote class="blockquote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Address
Use <address> tag
Purple imc
695 lsom Ave,
Suite 00
San Francisco, CA 94107
johndoe@examplemeail.com
Web Address
www.Purple.com
Lead
Use class .lead
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Text colors
Use class .text-primary, .text-secondary etc. for text in theme colors
.text-primary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-secondary
.text-dark
.text-muted
.text-white
Top aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.
Center aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.
Bottom aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.
Highlighted Text
Wrap the text in <mark> to highlight text
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
List Unordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Bold text
Use class.font-weight-bold
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
List Ordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>
Underline
Wrap in <u> tag for underline
lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
Lowercase
Use class .text-lowercase
lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
Uppercase
Use class .text-uppercase
lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
Mute
Use class .text-muted
lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
Strike
Wrap content in <del> tag
lorem ipsum dolor sit amet, consectetur
mod tempor incididunt ut labore et dolore
magna aliqua.
Capitalized
Use class .text-capitalize
lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
List with icon
Add class .list-ticked to <ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>
List with icon
Add class .list-arrow to <ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>
List with icon
Add class .list-star to <ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>