Text styling
Contextual colors
Example Description
This is a muted text For muted text color use .text-muted class
This is a primary text For primary text color use .text-primary class
This is a danger text For danger text color use .text-danger class
This is a success text For success text color use .text-success class
This is a warning text For warning text color use .text-warning class
This is a info text For info text color use .text-info class
Contextual backgrounds
Example Description
Primary background For primary background color use .bg-primary class
Danger background For danger background color use .bg-danger class
Success background For success background color use .bg-success class
Warning background For warning background color use .bg-warning class
Info background For info background color use .bg-info class
Custom background For a custom background color use .bg-* class
Text options
Example Description
Links
This is a default link Default style for <a> element
This is a text color link To use a link with default text color link, add .text-default class
This is a contextual color link To use a link with contextual color link, add .text-danger or any other contextual class
This is a custom color link To use a link with custom color link, add .text-* or any other text color class
Font weight
This is a light text For light font weight use .text-light class
This is a regular text For forced regular font weight use .text-regular class
This is a semibold text For semibold font weight use .text-semibold class
This is a bold text For bold font weight use .text-bold class
This is a extra bold text For extra bold font weight use .text-extrabold class
Font style
This is an italic text For italic font style use <em> tag
This is an uppercase text For uppercase text transformation use .text-uppercase class
This is a lowercase text For lowercase text transformation use .text-lowercase class
This is a capitalized text For capitalize text transformation use .text-capitalize class
This is a deleted text For indicating blocks of text that have been deleted use the <del> tag.
This is a strikethrough text For indicating blocks of text that are no longer relevant use the <s> tag.
This is an underlined text To underline text use the <u> tag.
Font size
This is a extra large text size For larger text size use .text-size-extralarge class
This is a large text size For larger text size use .text-size-large class
This is a default text size Default font size is 12px, doesn;t require any special classes
This is a smaller text size For smaller text size use .text-size-small class
This is a mini text size For mini text size use .text-size-mini class
Text elements
This is a muted text Add .text-muted class to mute text
This is a highlighted text For text highlighting in another context, use the <mark> tag
This is a inserted text For indicating additions to the document use the <ins> tag
Basic abbreviation For expanded text on abbr hover, use the <abbr> element
Abbreviation with initialism Add .initialism to an abbreviation for a slightly smaller font-size
Press ctrl + , to edit Use the <kbd> to indicate input that is typically entered via keyboard
y = mx + b Use the <var> to indicate variables
This is a sample text Use the <samp> to indicate blocks sample output from a program
Inline code snippet Wrap inline snippets of code with <code>
Text alignment
Left aligned text For left text alignment, use .text-left alignment class
Centered text For center text alignment, use .text-center alignment class
Right aligned text For right text alignment, use .text-right alignment class
Justified text For justified text, use .text-justify alignment class
No wrap text For no wrap text, use .text-nowrap alignment class