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-xlg class
This is a large text size For larger text size use .text-lg 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-sm class
This is a mini text size For mini text size use .text-xs 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
Chats
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
chat

Sushi tonight?

10:14 am
chat

Pizza?

We had sushi last time!

For me one Vegetariana! Plus some chili oil on it!

10:15 am
chat

Done. Delivery takes 5 minutes!

10:16 am
chat

Awesome! See you later! : )

Just now