From a73946b08dbf8baf9ff4aa5ee221bcd3cad9d38f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 17 Apr 2015 01:31:09 -0700 Subject: move text utilities docs from type to utilities --- docs/components/utilities.md | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) (limited to 'docs/components') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index e6d79db8f..0d6fe2595 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -3,6 +3,30 @@ layout: page title: Utility classes --- +Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to keep the number of declarations in your CSS down while allowing for quick and easy development. + +### Text alignment + +Easily realign text to components with text alignment classes. + +{% example html %} +

Left aligned text.

+

Center aligned text.

+

Right aligned text.

+

Justified text.

+

No wrap text.

+{% endexample %} + +### Text transform + +Transform text in components with text capitalization classes. + +{% example html %} +

Lowercased text.

+

Uppercased text.

+

Capitalized text.

+{% endexample %} + ### Contextual 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. @@ -63,7 +87,7 @@ Use a generic close icon for dismissing content like modals and alerts. **Be sur {% endexample %} -### Quick 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. @@ -90,7 +114,7 @@ Float an element to the left or right with a class. `!important` is included to } {% endhighlight %} -### Center content blocks +### Center content Set an element to `display: block;` and center via `margin`. Available as a mixin and class. @@ -167,7 +191,7 @@ The `.invisible` class can be used to toggle only the visibility of an element, } {% endhighlight %} -### Screen readers and keyboard navigation +### 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. -- cgit v1.2.3