Jonathan Clarke
UI/UX DesignerTypography
Dashboard typographyTypography
use tags h1 to h6
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Typography
Secondary text in any heading with.text-muted on small tag
h1. Heading plast amet
h2. Heading plast amet
h3. BHeading plast amet
h4. Heading plast amet
h5. Heading plast amet
h6. Heading plast amet
Paragraph justified
use .text-justify to justify a paragraht text
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
Paragraph alignment
Use either.text-left, .text-center or .text-right to align text
Left aligned paragrapht text
Center aligned paragrapht text
Right aligned paragrapht text
Text-transform
use .text-lowercase, .text-uppercase, .text-capitalize
Lowercased text.
Uppercased text.
CapiTaliZed text.
Font weight and Italics
Use classes .font-weight-bold, .font-weight-normal, .font-weight-light, .font-italic
Bold text.
Normal weight text.
Light weight text.
Italic text.
Text-colors
use text-color utilities
This is a primary text. Use class .text-primary
This is a success text. Use class .text-success
This is a muted text. Use class .text-muted
This is a danger text. Use class .text-danger
This is a info text. Use class .text-info
This is a secondary text. Use class .text-secondary
This is a dark text. Use class .text-dark
This is a warning text. Use class .text-warning
Blockquotes
Add class .blockquote to blockquote element
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.
Ul Listing
use ul > li for lists
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
Ol Listing
use ol > li for lists
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
Description Text
use ul > li for lists
- Description lists
This is a description list text
Address
Use addressas required
Twitter, Inc.455 Alen Ave, Apartment 4B
Lagos, CA 94107
P:(123) 456-7890
Rayhan Rasheed
Inline Text elements
Styling for common inline HTML5 elements.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.