Parahraph Link
``` ## Custom headers ### t-header-yellow ```html_example.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
``` ```html.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
``` 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 additional link styling beyond underline.** ```html_example ``` ```html ``` ## Background color 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. Background utilities do **not set color**, so in some cases you’ll want to use `.text-*` utilities. ```html_exampleAmbitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
```` ```htmlAmbitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
```` For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. ```html_exampleLeft aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
```` ```htmlLeft aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
```` ## Text wrapping and overflow Wrap text with a `.text-wrap` class. ```html_examplemmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
```` ```htmlmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
```` ## Text transform Transform text in components with text capitalization classes. ```html_exampleLowercased text.
Uppercased text.
CapiTaliZed text.
```` ```htmlLowercased text.
Uppercased text.
CapiTaliZed text.
```` Note how `.text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected. ## Font weight and italics Quickly change the weight (boldness) of text or italicize text. ```html_exampleBold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
```` ```htmlBold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
```` ## Monospace Change a selection to our monospace font stack with `.text-monospace`. ```html_exampleThis is in monospace
```` ```htmlThis is in monospace
```` ## Reset color Reset a text or link’s color with `.text-reset`, so that it inherits the color from its parent. ```html_exampleMuted text with a reset link.
```` ```htmlMuted text with a reset link.
```` ## Text decoration Remove a text decoration with a `.text-decoration-none` class. ```html_example Non-underlined link ```` ```html Non-underlined link ```` */ /*md # Vertical alignment Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. Change the alignment of elements with the [vertical-alignment](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements. Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed. With inline elements: ```html_example baseline top middle bottom text-top text-bottom ```` ```html baseline top middle bottom text-top text-bottom ```` With table cells: ```html_example| baseline | top | middle | bottom | text-top | text-bottom |
| baseline | top | middle | bottom | text-top | text-bottom |
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.