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 |
|
