diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 563e4b7f67..a07e2de9e8 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -10,7 +10,7 @@ Bootstrap includes dozens of utilities—classes with a single purpose. They're * Will be replaced with the ToC, excluding the "Contents" header {:toc} -### Text alignment +## Text alignment Easily realign text to components with text alignment classes. @@ -22,7 +22,7 @@ Easily realign text to components with text alignment classes.

No wrap text.

{% endexample %} -### Text transform +## Text transform Transform text in components with text capitalization classes. @@ -32,9 +32,7 @@ Transform text in components with text capitalization classes.

Capitalized text.

{% endexample %} -### Contextual colors - -### Contextual colors and backgrounds +## Contextual colors and backgrounds 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. @@ -69,7 +67,7 @@ Sometimes contextual classes cannot be applied due to the specificity of another Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational. {% endcallout %} -### Close icon +## Close icon Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`. @@ -80,7 +78,7 @@ Use a generic close icon for dismissing content like modals and alerts. **Be sur {% endexample %} -### Floats +## Floats Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins. @@ -107,7 +105,7 @@ Float an element to the left or right with a class. `!important` is included to } {% endhighlight %} -### Center content +## Center content Set an element to `display: block;` and center via `margin`. Available as a mixin and class. @@ -154,7 +152,7 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes } {% endhighlight %} -### Hidden content +## Hidden content Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io). @@ -164,7 +162,7 @@ Furthermore, `.invisible` can be used to toggle the visibility of an element, me {% endhighlight %} -### Invisible content +## Invisible content The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. @@ -184,7 +182,7 @@ The `.invisible` class can be used to toggle only the visibility of an element, } {% endhighlight %} -### Screen readers +## Screen readers Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following [accessibility best practices](../getting-started/#accessibility). Can also be used as mixins. @@ -200,7 +198,7 @@ Hide an element to all devices **except screen readers** with `.sr-only`. Combin } {% endhighlight %} -### Image replacement +## Image replacement Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image. @@ -215,7 +213,7 @@ Utilize the `.text-hide` class or mixin to help replace an element's text conten } {% endhighlight %} -### Responsive embeds +## Responsive embeds Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.