Contextual text 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. 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. You can also easily set the background of an element to any contextual
class.
| Text | Link | Description |
|---|---|---|
| Muted text color | Muted link color | For muted inline text and text link color use .text-muted class
added to the link or text container |
| Secondary text color | Secondary link color | For secondary inline text and text link color use
.text-secondary class in text element and
.link-secondary in anchor |
| Dark text color | Dark link color | For dark inline text and text link color use .text-dark class
in text element and .link-dark in anchor |
| Default text color | Default link color | For default inline text and text link color use .text-body
class in text element and .link-body in anchor |
| Primary text color | Primary link color | For primary inline text and text link color use .text-primary
class in text element and .link-primary in anchor |
| Danger text color | Danger link color | For danger inline text and text link color use .text-danger
class in text element and .link-danger in anchor |
| Success text color | Success link color | For success inline text and text link color use .text-success
class in text element and .link-success in anchor |
| Warning text color | Warning link color | For warning inline text and text link color use .text-warning
class in text element and .link-warning in anchor |
| Info text color | Info link color | For info inline text and text link color use .text-info class
in text element and .link-info in anchor |
| Pink text color | Pink link color | For pink inline text and text link color use .text-pink class
in text element and .link-pink in anchor |
| Purple text color | Purple link color | For purple inline text and text link color use .text-purple
class in text element and .link-purple in anchor |
| Indigo text color | Indigo link color | For indigo inline text and text link color use .text-indigo
class in text element and .link-indigo in anchor |
| Teal text color | Teal link color | For teal inline text and text link color use .text-teal class
in text element and .link-teal in anchor |
| Yellow text color | Yellow link color | For yellow inline text and text link color use .text-yellow
class in text element and .link-yellow in anchor |
| White text color | White link color | For white inline text and text link color use .text-white class
in text element and .link-white in anchor |
Text options
Limitless template supports the majority of all possible text styling
options - weights, sizes, styles and additional elements such as marks, abbreviations,
keyboard inputs, sample and variable inputs etc. All these stylings can be applied any
section heading, form components, content and UI elements just by adding proper class to the
element. Basic text styles are included to BS framework by default, Limitless includes more
extended typography.
| 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-body
class |
|
| This is a contextual color link | To use a link with contextual color link, add .link-danger or
any other contextual class |
|
| This is a custom color link | To use a link with custom color link, add .link-purple or any
other text color class |
|
| Font weight | ||
| This is a lighter text | For thin font weight use .fw-lighter class |
|
| This is a light text | For light font weight use .fw-light class |
|
| This is a regular text | For forced regular font weight use .fw-normal class |
|
| This is a semibold text | For semibold font weight use .fw-semibold class |
|
| This is a bold text | For bold font weight use .fw-bold class |
|
| This is a bolder text | For black font weight use .fw-bolder class |
|
| Font style | ||
| This is an italic text | For italic font style use em tag or .fst-italic
class |
|
| 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 |
For indicating blocks of text that have been deleted use the
<del> tag |
|
| This is a |
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 |
|
| This is a truncated text with an ellipsis | For longer content, you can add a .text-truncate class to
truncate the text with an ellipsis |
|
| Font size | ||
| This is a larger text size | For larger text size use .fs-lg class |
|
| This is a default text size | To reset any font size to default, use .fs-base class |
|
| This is a smaller text size | For smaller text size use .fs-sm class |
|
| This is a mini text size | For mini text size use .fs-xs class |
|
| Text elements | ||
| 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> |
|
| This is a sub text | Use <sub> tag to display subscripted text |
|
| This is a sup text | Use <sup> tag to display superscripted text |
|
| Small text | Use <small> tag to display smaller text |
|
| Text alignment | ||
| Left aligned text | For left text alignment, use .text-start alignment class. You
can also use viewport classes .text-[sm, md, lg, xl]-start for
better alignment control |
|
| Centered text | For centered text, use .text-center alignment class. You can
also use viewport classes .text-[sm, md, lg, xl]-center for
better alignment control |
|
| Right aligned text | For right text alignment, use .text-end alignment class. You
can also use viewport classes .text-[sm, md, lg, xl]-end for
better alignment control |
|
| Word break | Prevent long strings of text from breaking your components' layout by using
.text-break class |
|
| No wrap text | For no wrap text, use .text-nowrap alignment class |
|
