Victoria Baker
Senior developer
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 added to the link or text container |
| Dark text color | Dark link color | For dark inline text and text link color use .text-dark class added to the link or text container |
| Default text color | Default link color | For default inline text and text link color use .text-body class added to the link or text container |
| Primary text color | Primary link color | For primary inline text and text link color use .text-primary class added to the link or text container |
| Danger text color | Danger link color | For danger inline text and text link color use .text-danger class added to the link or text container |
| Success text color | Success link color | For success inline text and text link color use .text-success class added to the link or text container |
| Warning text color | Warning link color | For warning inline text and text link color use .text-warning class added to the link or text container |
| Info text color | Info link color | For info inline text and text link color use .text-info class added to the link or text container |
| Pink text color | Pink link color | For pink inline text and text link color use .text-pink class added to the link or text container |
| Purple text color | Purple link color | For purple inline text and text link color use .text-purple class added to the link or text container |
| Indigo text color | Indigo link color | For indigo inline text and text link color use .text-indigo class added to the link or text container |
| Teal text color | Teal link color | For teal inline text and text link color use .text-teal class added to the link or text container |
| Yellow text color | Yellow link color | For yellow inline text and text link color use .text-yellow class added to the link or text container |
| White text color | White link color | For white inline text and text link color use .text-white class added to the link or text container |
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 .text-danger or any other contextual class |
|
| This is a custom color link | To use a link with custom color link, add .text-purple or any other text color class |
|
| Font weight | ||
| This is a thin text | For thin font weight use .font-weight-thin class |
|
| This is a light text | For light font weight use .font-weight-light class |
|
| This is a regular text | For forced regular font weight use .font-weight-normal class |
|
| This is a semibold text | For semibold font weight use .font-weight-semibold class |
|
| This is a bold text | For bold font weight use .font-weight-bold class |
|
| This is a black text | For black font weight use .font-weight-black class |
|
| Font style | ||
| This is an italic text | For italic font style use .font-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 .font-size-lg class |
|
| This is a default text size | Default font size is 13px, doesn't require any special classes |
|
| This is a smaller text size | For smaller text size use .font-size-sm class |
|
| This is a mini text size | For mini text size use .font-size-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-left alignment class. You can also use viewport classes .text-[sn, md, lg, xl]-left for better alignment control |
|
| Centered text | For centered text, use .text-center alignment class. You can also use viewport classes .text-[sn, md, lg, xl]-center for better alignment control |
|
| Right aligned text | For right text alignment, use .text-right alignment class. You can also use viewport classes .text-[sn, md, lg, xl]-right for better alignment control |
|
| Justified text | For justified text, use .text-justify alignment class |
|
| No wrap text | For no wrap text, use .text-nowrap alignment class |
|