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 |
|
Nullam id dolor id nibh ultricies vehicula ut id elit. |
.text-primary |
|
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. |
.text-success |
|
Maecenas sed diam eget risus varius blandit sit amet non magna. |
.text-info |
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-warning |
|
Donec ullamcorper nulla non metus auctor fringilla. |
.text-danger |
|
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 |
|
Nullam id dolor id nibh ultricies vehicula ut id elit. |
.purple |
|
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. |
.cyan |
|
Maecenas sed diam eget risus varius blandit sit amet non magna. |
.blue |
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.teal |
|
Donec ullamcorper nulla non metus auctor fringilla. |
.blue-grey |
|
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 |
|
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. | .bg-success |
|
Maecenas sed diam eget risus varius blandit sit amet non magna. | .bg-info |
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. | .bg-warning |
|
Donec ullamcorper nulla non metus auctor fringilla. | .bg-danger |
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. | .bg-dark |
|
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 |
|
Nullam id dolor id nibh ultricies. | .purple |
|
Duis mollis, est non commodo luctus, nisi erat. | .bg-cyan |
|
Maecenas sed diam eget risus varius blandit sit. | .bg-blue |
|
Fusce dapibus, tellus ac cursus commodo. | .bg-teal |
|
Donec ullamcorper nulla non metus. | .blue-grey |
|
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 |
|
It is a long established fact that a reader. |
.text-nowrap |
|
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 |
|
Center aligned text on all viewport sizes. |
.text-center |
|
Right aligned text on all viewport sizes. |
.text-right |
|
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 |
|
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 |
|
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 |
|
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 |
|
Uppercased text. |
.text-uppercase |
|
CapiTaliZed text. |
.text-capitalize |
|
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
|
|
Large lg text size. |
.font-large-2
|
|
Large lg text size. |
.font-large-1
|
|
Large md text size. |
.font-medium-3
|
|
Large md text size. |
.font-medium-2
|
|
Large sm text size. |
.font-medium-1
|
|
Normal base text size. |
N/A |
|
Small lg text size. |
.font-small-3
|
|
Small md text size. |
.font-small-2
|
|
Small sm text size. |
.font-small-1
|
|
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 |
|
Font weight 400 |
.text-bold-400 |
|
Font weight 600 |
.text-bold-600 |
|
Font weight 700 |
.text-bold-700 |
|
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. |
|
|
|
|
|
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. |
|
Sample abbreviation |
|
Sample HTML title. |
|
y = m x + b |
|
Edit settings, press ctrl + , |
|
This text is meant to be treated as sample output from a computer program. |
|
Inline code snippet
|
|