Appearance - Text Styling
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 | Description |
|---|---|
| This is a muted text | For muted text color use .text-muted class |
| This is a primary text | For primary text color use .text-primary class |
| This is a danger text | For danger text color use .text-danger class |
| This is a success text | For success text color use .text-success class |
| This is a warning text | For warning text color use .text-warning class |
| This is a info text | For info text color use .text-info class |
Similar to the 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 | Description |
|---|---|
| Primary background | For primary background color use .bg-primary class |
| Danger background | For danger background color use .bg-danger class |
| Success background | For success background color use .bg-success class |
| Warning background | For warning background color use .bg-warning class |
| Info background | For info background color use .bg-info class |
| Custom background | For a custom background color use .bg-* class |
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-default 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-teal or any other text color class |
|
| Font weight | ||
| This is a thin text | For thin font weight use .text-thin class |
|
| This is a light text | For light font weight use .text-light class |
|
| This is a regular text | For forced regular font weight use .text-regular class |
|
| This is a semibold text | For semibold font weight use .text-semibold class |
|
| This is a bold text | For bold font weight use .text-bold class |
|
| This is a black text | For black font weight use .text-black class |
|
| Font style | ||
| This is an italic text | For italic font style use <em> tag |
|
| 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. |
|
| Font size | ||
| This is a larger text size | For larger text size use .text-size-large 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 .text-size-small class |
|
| This is a mini text size | For mini text size use .text-size-mini 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> |
|
| Text alignment | ||
| Left aligned text | For left text alignment, use .text-left alignment class |
|
| Centered text | For center text alignment, use .text-center alignment class |
|
| Right aligned text | For right text alignment, use .text-right alignment class |
|
| Justified text | For justified text, use .text-justify alignment class |
|
| No wrap text | For no wrap text, use .text-nowrap alignment class |
|