Defaults Colors #1.01

Use any of these color variables as they are or reassign them to more meaningful variables for your project.

This is an example for .text-primary

This is an example for .text-secondary

This is an example for .text-success

This is an example for .text-success

This is an example for .text-warning

This is an example for .text-info

This is an example for .text-body

This is an example for .text-muted

This is an example for .text-dark

This is an example for .text-black-50

This is an example for .text-white

This is an example for .text-light

This is an example for .text-white-50

Grays #1.02

Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.

This is an example for .text-gray-100

This is an example for .text-gray-200

This is an example for .text-gray-300

This is an example for .text-gray-400

This is an example for .text-gray-500

This is an example for .text-gray-600

This is an example for .text-gray-700

This is an example for .text-gray-800

This is an example for .text-gray-900

Social Colors #1.03

Colors are often used for social media.

This is an example for .text-facebook

This is an example for .text-twitter

This is an example for .text-lastfm

This is an example for .text-pinterest

This is an example for .text-linkedin

This is an example for .text-medium

This is an example for .text-skype

This is an example for .text-foursquare

This is an example for .text-android

This is an example for .text-spotify

This is an example for .text-youtube

This is an example for .text-windows

This is an example for .text-amazon

Links Colors #1.04

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no link styling.

This is an example Primary Link

This is an example Secondary Link

This is an example Success Link

This is an example Danger Link

This is an example Warning Link

This is an example Info Link

This is an example Dark Link

This is an example Light Link

Header: Light #1.01

Just add class/helper .fw-300 to <h1> - <h6>.

h1. Light Heading

h2. Light Heading

h3. Light Heading

h4. Light Heading

h5. Light Heading

h6. Light Heading

Text: Justify #2.01

Just add class .text-justify.

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.

Text: No Wrap #2.03

Prevent text from wrapping with a .text-nowrap class.

Text: Transform #2.05

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

CapiTaliZed text.

Text: Monospace #2.07

Change a selection to our monospace font stack with .text-monospace.

This is in monospace

Text: Inline text elements #2.09

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.

Text: Alignment #2.02

Add class .text-left, .text-center or .text-right.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Text: Truncate #2.04

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

Text: Transform #2.06

Quickly change the weight (boldness) of text or italicize text.

Bold text.

Normal weight text.

Light weight text.

Italic text.

Text: Lead #2.08

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Text: Abbreviations #2.10

Add .initialism to an abbreviation for a slightly smaller font-size.

attr

HTML

Blackquote: Default #3.01

Wrap <blockquote class="blockquote"> around any HTML as the quote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Blackquote: Alignment Center #3.03

Use text utilities as needed to change the alignment of your blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Blackquote: Naming a source #3.02

Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Blackquote: Alignment Right #3.04

Use text utilities as needed to change the alignment of your blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lists: Unstyled #4.01

Remove the default list-style and left margin on list items.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Lists: Inline #4.02

Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

Lists: Description list alignment #4.04

Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Truncated term is truncated

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Nested definition list

Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Code: Inline Code #6.01

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

Code: Variables #6.03

For indicating variables use the <var> tag.

Code: User Input #6.04

Use the <kbd> to indicate input that is typically entered via keyboard.

Code: Sample Output #6.05

For indicating sample output from a program use the <samp> tag.

Code: Sample Output #6.02

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable class, \ which will set a max-height of 340px and provide a y-axis scrollbar.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>