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-whiteand .text-mutedclass 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-mutedclass added to the link or text container
|
| Secondary text color | Secondary link color |
For secondary inline text and text link color use .text-secondaryclass added to the link or text container
|
| Dark text color | Dark link color |
For dark inline text and text link color use .text-darkclass added to the link or text container
|
| Default text color | Default link color |
For default inline text and text link color use .text-defaultclass added to the link or text container
|
| Primary text color | Primary link color |
For primary inline text and text link color use .text-primaryclass added to the link or text container
|
| Danger text color | Danger link color |
For danger inline text and text link color use .text-dangerclass added to the link or text container
|
| Success text color | Success link color |
For success inline text and text link color use .text-successclass added to the link or text container
|
| Warning text color | Warning link color |
For warning inline text and text link color use .text-warningclass added to the link or text container
|
| Info text color | Info link color |
For info inline text and text link color use .text-infoclass added to the link or text container
|
| Custom text color | Custom link color |
For custom inline text and text link color use .text-*color class added to the link or text container
|
| White text color | White link color |
For white inline text and text link color use .text-whiteclass 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-defaultclass
|
|
| This is a contextual color link |
To use a link with contextual color link, add .text-dangeror any other contextual class
|
|
| This is a custom color link |
To use a link with custom color link, add .text-purpleor any other text color class
|
|
| Font weight | ||
| This is a thin text |
For thin font weight use .font-weight-thinclass
|
|
| This is a light text |
For light font weight use .font-weight-lightclass
|
|
| This is a regular text |
For forced regular font weight use .font-weight-normalclass
|
|
| This is a semibold text |
For semibold font weight use .font-weight-semiboldclass
|
|
| This is a bold text |
For bold font weight use .font-weight-boldclass
|
|
| This is a black text |
For black font weight use .font-weight-blackclass
|
|
| Font style | ||
| This is an italic text |
For italic font style use .font-italicclass
|
|
| This is an uppercase text |
For uppercase text transformation use .text-uppercaseclass
|
|
| This is a lowercasetext |
For lowercase text transformation use .text-lowercaseclass
|
|
| This is a capitalized text |
For capitalize text transformation use .text-capitalizeclass
|
|
|
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-truncateclass to truncate the text with an ellipsis
|
|
| Font size | ||
| This is a larger text size |
For larger text size use .font-size-lgclass
|
|
| 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-smclass
|
|
| This is a mini text size |
For mini text size use .font-size-xsclass
|
|
| Text elements | ||
| This is a highlightedtext |
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
|
|
| Abbreviationwith initialism |
Add .initialismto 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-leftalignment class. You can also use viewport classes .text-[sn, md, lg, xl]-leftfor better alignment control
|
|
| Centered text |
For centered text, use .text-centeralignment class. You can also use viewport classes .text-[sn, md, lg, xl]-centerfor better alignment control
|
|
| Right aligned text |
For right text alignment, use .text-rightalignment class. You can also use viewport classes .text-[sn, md, lg, xl]-rightfor better alignment control
|
|
| Justified text |
For justified text, use .text-justifyalignment class
|
|
| No wrap text |
For no wrap text, use .text-nowrapalignment class
|
|