Text Utilities

  1. Home
  2. Content
  3. Text Utilities
CardsButtons

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Example Classes Snippet

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

 .text-muted 
                              
                                <p class="text-muted">Your Text.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

 .text-primary 
                              
                                <p class="text-primary">Your Text.</p>

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

 .text-success 
                              
                                <p class="text-success">Your Text.</p>

Maecenas sed diam eget risus varius blandit sit amet non magna.

 .text-info 
                              
                                <p class="text-info">Your Text.</p>

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

 .text-warning 
                              
                                <p class="text-warning">Your Text.</p>

Donec ullamcorper nulla non metus auctor fringilla.

 .text-danger 
                              
                                <p class="text-danger">Your Text.</p>

Modern Admin also provide custom color palette for the text, below table show you usage.

You can also use text lighten, darken and accent classes.

  • li.red .lighten-* For lighten red text color, this two classes needed. Here *: 1,2,3,4 for lighten red color options.
  • .red .darken-* For darken red text color, this two classes needed. Here *: 1,2,3,4 for darken red color options.
  • .red .accent-* For accent red text color, this two classes needed. Here *: 1,2,3,4 for accent red color options.
Example Classes Snippet

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

 .red 
                              
                                <p class="red">Your Text.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

 .purple 
                              
                                <p class="purple">Your Text.</p>

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

 .cyan 
                              
                                <p class="cyan">Your Text.</p>

Maecenas sed diam eget risus varius blandit sit amet non magna.

 .blue 
                              
                                <p class="blue">Your Text.</p>

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

 .teal 
                              
                                <p class="teal">Your Text.</p>

Donec ullamcorper nulla non metus auctor fringilla.

 .blue-grey 
                              
                                <p class="blue-grey">Your Text.</p>

Contextual background

Contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Example Classes Snippet
Nullam id dolor id nibh ultricies vehicula ut id elit. .bg-primary 
                              
                                <p class="bg-primary">Your Text.</p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. .bg-success 
                              
                                <p class="bg-success">Your Text.</p>
Maecenas sed diam eget risus varius blandit sit amet non magna. .bg-info 
                              
                                <p class="bg-info">Your Text.</p>
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. .bg-warning 
                              
                                <p class="bg-warning">Your Text.</p>
Donec ullamcorper nulla non metus auctor fringilla. .bg-danger 
                              
                                <p class="bg-danger">Your Text.</p>
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. .bg-dark 
                              
                                <p class="bg-dark">Your Text.</p>

Modern Admin also provide custom color palette for the background colors, below table show you usage.

You can also use background lighten, darken and accent classes.

  • .bg-red .bg-lighten-* For lighten red text color, this two classes needed. Here *: 1,2,3,4 for lighten red color options.
  • .bg-red .bg-darken-* For darken red text color, this two classes needed. Here *: 1,2,3,4 for darken red color options.
  • .bg-red .bg-accent-* For accent red text color, this two classes needed. Here *: 1,2,3,4 for accent red color options.
Example Classes Snippet
Fusce dapibus, tellus ac cursus commodo. .bg-red 
                              
                                <p class="bg-red bg-dark">Your Text.</p>
Nullam id dolor id nibh ultricies. .purple 
                              
                                <p class="bg-purple bg-dark">Your Text.</p>
Duis mollis, est non commodo luctus, nisi erat. .bg-cyan 
                              
                                <p class="bg-cyan bg-dark">Your Text.</p>
Maecenas sed diam eget risus varius blandit sit. .bg-blue 
                              
                                <p class="bg-blue bg-dark">Your Text.</p>
Fusce dapibus, tellus ac cursus commodo. .bg-teal 
                              
                                <p class="bg-teal bg-dark">Your Text.</p>
Donec ullamcorper nulla non metus. .blue-grey 
                              
                                <p class="blue-grey bg-dark">Your Text.</p>

Text alignment

Easily realign text to components with text alignment classes.

Example Classes Snippet

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

 .text-justify 
                              
                                <p class="text-justify">Justified text.</p>

It is a long established fact that a reader.

 .text-nowrap 
                              
                                <p class="text-nowrap">No wrap text.</p>

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Example Classes Snippet

Left aligned text on all viewport sizes.

 .text-left 
                              
                                <p class="text-left">Left aligned text on all viewport sizes.</p>

Center aligned text on all viewport sizes.

 .text-center 
                              
                                <p class="text-center">Center aligned text on all viewport sizes.</p>

Right aligned text on all viewport sizes.

 .text-right 
                              
                                <p class="text-right">Right aligned text on all viewport sizes.</p>

Left aligned text on viewports sized SM or wider.

Left aligned text on viewports sized MD or wider.

Left aligned text on viewports sized LG or wider.

Left aligned text on viewports sized XL or wider.

 .text-sm-left .text-md-left .text-lg-left .text-xl-left 
                              
                                <p class="text-sm-left">Left aligned text on viewports sized SM or wider.</p>
                                <p class="text-md-left">Left aligned text on viewports sized MD or wider.</p>
                                <p class="text-lg-left">Left aligned text on viewports sized LG or wider.</p>
                                <p class="text-xl-left">Left aligned text on viewports sized XL or wider.</p>

Center aligned text on viewports sized SM or wider.

Center aligned text on viewports sized MD or wider.

Center aligned text on viewports sized LG or wider.

Center aligned text on viewports sized XL or wider.

 .text-sm-center .text-md-center .text-lg-center .text-xl-center 
                              
                                <p class="text-sm-center">Center aligned text on viewports sized SM or wider.</p>
                                <p class="text-md-center">Center aligned text on viewports sized MD or wider.</p>
                                <p class="text-lg-center">Center aligned text on viewports sized LG or wider.</p>
                                <p class="text-xl-center">Center aligned text on viewports sized XL or wider.</p>

Right aligned text on viewports sized SM or wider.

Right aligned text on viewports sized MD or wider.

Right aligned text on viewports sized LG or wider.

Right aligned text on viewports sized XL or wider.

 .text-sm-right .text-md-right .text-lg-right .text-xl-right 
                              
                                <p class="text-sm-right">Right aligned text on viewports sized SM or wider.</p>
                                <p class="text-md-right">Right aligned text on viewports sized MD or wider.</p>
                                <p class="text-lg-right">Right aligned text on viewports sized LG or wider.</p>
                                <p class="text-xl-right">Right aligned text on viewports sized XL or wider.</p>

Text transform

Transform text in components with text capitalization classes.

Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

Example Classes Snippet

Lowercased text.

 .text-lowercase 
                              
                                <p class="text-lowercase">Lowercased text.</p>

Uppercased text.

 .text-uppercase 
                              
                                <p class="text-uppercase">Uppercased text.</p>

CapiTaliZed text.

 .text-capitalize 
                              
                                <p class="text-capitalize">CapiTaliZed text.</p>

Text option

Font size

Modern Admin provide font large & small sizes variant classes to change font size.

Example Classes Snippet

Large lg text size.

 .font-large-3 
                              
                                <p class="font-large-3" >Large lg text size.</p>

Large lg text size.

 .font-large-2 
                              
                                <p class="font-large-2" >Large lg text size.</p>

Large lg text size.

 .font-large-1 
                              
                                <p class="font-large-1" >Large lg text size.</p>

Large md text size.

 .font-medium-3 
                              
                                <p class="font-medium-3" >Large md text size.</p>

Large md text size.

 .font-medium-2 
                              
                                <p class="font-medium-2" >Large md text size.</p>

Large sm text size.

 .font-medium-1 
                              
                                <p class="font-medium-1" >Large sm text size.</p>

Normal base text size.

 N/A 
                              
                                <p>Normal base text size.</p>

Small lg text size.

 .font-small-3 
                              
                                <p class="font-small-3" >Small lg text size.</p>

Small md text size.

 .font-small-2 
                              
                                <p class="font-small-2" >Small md text size.</p>

Small sm text size.

 .font-small-1 
                              
                                <p class="font-small-1" >Small sm text size.</p>
Font weight

Modern Admin provide font weight class .text-bold-{weight}, where {weight} value can be 100,200 ... 900.

Example Classes Snippet

Font weight 300

 .text-bold-300 
                              
                                <p class="text-bold-300">Font weight 300.</p>

Font weight 400

 .text-bold-400 
                              
                                <p class="text-bold-400">Font weight 400.</p>

Font weight 600

 .text-bold-600 
                              
                                <p class="text-bold-600">Font weight 600.</p>

Font weight 700

 .text-bold-700 
                              
                                <p class="text-bold-700">Font weight 700.</p>
Inline text elements

Styling for common inline HTML5 elements.

.mark and .small classes are also available to apply the same styles as <mark> and <small> while avoiding any unwanted semantic implications that the tags would bring.

While not shown above, feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Example Snippet

You can use the mark tag to highlight text.

 
                              
                                <p>You can use the mark tag to <mark>highlight</mark> text.</p>

This line of text is meant to be treated as deleted text. 

                              
                                <p><del>This line of text is meant to be treated as deleted text.</del></p>

This line of text is meant to be treated as no longer accurate. 

                              
                                <p><s>This line of text is meant to be treated as no longer accurate.</s></p>

This line of text is meant to be treated as an addition to the document. 

                              
                                <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>

This line of text will render as underlined

 
                              
                                <p><u>This line of text will render as underlined.</u></p>

This line of text is meant to be treated as fine print. 

                              
                                <p><small>This line of text is meant to be treated as fine print.</small></p>

This line rendered as bold text. 

                              
                                <p><strong>This line rendered as bold text.</strong></p>

This line rendered as italicized text. 

                              
                                <p><em>This line rendered as italicized text.</em></p>

Sample abbreviation 

                              
                                <p> Sample <abbr>Abbreviations.</abbr></p>

Sample HTML title.

 
                              
                                <p> Sample <abbr title="HyperText Markup Language" class="initialism">HTML.</abbr></p>
y = m x + b 
                              
                                <p> For indicating variables use the <var> tag.</p>

Edit settings, press ctrl + , 

                              
                                <p> Use the <kbd>  to indicate input that is typically entered via keyboard.</p>
This text is meant to be treated as sample output from a computer program. 
                              
                                <p> For indicating sample output from a program use the  <samp>  tag. </p>
Inline code snippet 
                              
                                <p> Wrap inline snippets of code with <code> tag. </p>