Typography
Headings
We have included various amounts of typography options and elements for you to use how you please, lets start with the headings. These are basic HTML headings, use them when needed.
h1. heading
<h1>h1. heading</h1>
h2. heading
<h2>h2. heading</h2>
h3. heading
<h3>h3. heading</h3>
h4. heading
<h4>h4. heading</h4>
h5. heading
<h5>h5. heading</h5>
h6. heading
<h6>h6. heading</h6>
Headings + Secondary Text
Use these headings when you need some secondary text as well..
h1. heading Secondary text
<h1>h1. heading<small>Secondary text</small></h1>
h2. heading Secondary text
<h2>h2. heading<small>Secondary text</small></h2>
h3. heading Secondary text
<h3>h3. heading<small>Secondary text</small></h3>
h4. heading Secondary text
<h4>h4. heading<small>Secondary text</small></h4>
h5. heading Secondary text
<h5>h5. heading<small>Secondary text</small></h5>
h6. heading Secondary text
<h6>h6. heading<small>Secondary text</small></h6>
Emphasis
Bold and Italics:
A bold tag is used to mark text with a havier font. Italics can also be useful in certain situations, feel free to use these tags how you want, they have been here since the dawn of time!A bold tag is used to <b>highlight text with a havier font</b>. Italics can also <i>be useful in certain situations</i>, feel free to use these tags how you want, they have been here since the dawn of time!
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Beard try-hard Pitchfork sustainable.
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Beard try-hard Pitchfork sustainable.</p>
You can use the mark tag to highlight text as well.
<p>You can use the mark tag to <mark>highlight</mark> text as well.</p>
Use these emphasis classes to spunk up pages when you need to.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
Fixie whatever nostrud mollit stumptown.
<p class="text-success">Fixie whatever nostrud mollit stumptown.</p>
Trust fund irure literally hashtag Austin asymmetrical Kickstarter.
<p class="text-info"> Trust fund irure literally hashtag Austin asymmetrical Kickstarter.</p>
PBRB Tonx lomo asymmetrical cred, sint Marfa whatever. Disrupt banjo aliqua adipisicing, flannel et eiusmod.
<p class="text-primary">PBRB Tonx lomo asymmetrical cred, sint Marfa whatever. Disrupt banjo aliqua adipisicing, flannel et eiusmod.</p>
Locavore Blue Bottle magna wayfarers, ugh squid 8-bit cred.
<p class="text-warning">Locavore Blue Bottle magna wayfarers, ugh squid 8-bit cred.</p>
Twee delectus occaecat, asymmetrical sustainable irony +1 Etsy paleo hoodie retro Wes Anderson sapiente chia.
<p class="text-danger">Twee delectus occaecat, asymmetrical sustainable irony +1 Etsy paleo hoodie retro Wes Anderson sapiente chia.</p>
Body Text
Bootstrap's global default font-size is 14px, with an adjusted line-height of 1.8 for improved readability. This is applied to the <body> and all paragraphs.
<p>Laboris messenger bag anim, authentic hashtag fanny pack pug Portland banh mi nisi viral sapiente excepteur ethical. Messenger bag post-ironic Neutra shabby chic, non PBR hoodie roof party narwhal sunt retro sartorial kitsch wayfarers. Distillery 8-bit tofu wolf gentrify magna et, YOLO.</p>
Alignment
Align text to the left, right, or center easily with these classes.
Text aligned to the left.
<p class="text-left">Text aligned to the left.</p>
Text aligned to the center.
<p class="text-center">Text aligned to the center.</p>
Text aligned to the right.
<p class="text-right">Text aligned to the right.</p>
Description List
Use this for definitions or how you see fit.
- Description list
- I am a description list, use me wisely wizard.
- Pelican
- A large gregarious waterbird with a long bill, an extensible tpunch.
- Seagul
- A popular name for a gull.
<dl> <dt>Description list</dt> <dd>I am a description list, use me wisely wizard.</dd> <dt>Pelican</dt> <dd>A large gregarious waterbird with a long bill, an extensible tpunch.</dd> <dt>Seagul</dt> <dd>A popular name for a gull.</dd> </dl>
Horizontal Description List
Use this for horizontal definitions or how you see fit.
- Description list
- I am a description list, use me wisely wizard.
- Pelican
- A large gregarious waterbird with a long bill, an extensible throat pouch for scooping up fish.
- Seagul
- A popular name for a gull.
<dl class="dl-horizontal"> <dt>Description list</dt> <dd>I am a description list, use me wisely wizard.</dd> <dt>Pelican</dt> <dd>A large gregarious waterbird with a long bill, an extensible throat pouch for scooping up fish.</dd> <dt>Seagul</dt> <dd>A popular name for a gull.</dd> </dl>
Blockquotes
You can use this to display content from another source or just for a simple quote from a client or you. Feel free to use the text-left, text-right, and text-center alignment classes to align content inside the blockquotes, or anywhere you need to align something.
Default Blockquote:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
With name:
Mumblecore salvia single-origin coffee, 90's messenger bag cornhole Pitchfork polaroid Wes Anderson. Beard try-hard Pitchfork sustainable. Fashion axe letterpress craft beer, paleo.
<blockquote> <p>Mumblecore salvia single-origin coffee, 90's messenger bag cornhole Pitchfork polaroid Wes Anderson. Beard try-hard Pitchfork sustainable. Fashion axe letterpress craft beer, paleo.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
Transforming Text
There are a couple of different options for transforming text.
Lowercased text.
<p class="text-lowercase">Lowercased text.</p>
uppercase text.
<p class="text-uppercase">uppercase text.</p>
capitalize text.
<p class="text-capitalize">capitalize text.</p>
Address
Use this to display your address..
Twitter, Inc.795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
first.last@example.com
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
Text Color Options
In certain cases you might want to use theme colors to change text quickly (for example you an have an orange bg and need the text to be white) so we have built in the 3 main colors as classes for you to use, quickly and easily.
I am orange text
<p class="text-main">I am orange text</p>
I am dark text
<p class="text-dark">I am dark text</p>
I am white text.
<p class="text-white">I am white text</p>
Abbreviations
Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
Basic Abbreviation:
For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element.
Example: An abbreviation of the word attribute is attr.
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
Initialism:
Add .initialism to an abbreviation for a slightly smaller font-size.
Example: HTML is the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>