aboutsummaryrefslogtreecommitdiff
path: root/docs/components/utilities.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2015-11-29 19:54:20 -0800
committerMark Otto <[email protected]>2015-11-29 19:54:20 -0800
commit0fa2c7c4866a4ada900a0bebd45ab8b741db6788 (patch)
tree9aca4400012f25b1fb2f5f03f70cc658da9199a9 /docs/components/utilities.md
parent765c5e9c07610a713a89e1664d6df539cdea44b4 (diff)
parentc68019e5d0ac1eba6cda998a0f4067809a10c443 (diff)
downloadbootstrap-0fa2c7c4866a4ada900a0bebd45ab8b741db6788.tar.xz
bootstrap-0fa2c7c4866a4ada900a0bebd45ab8b741db6788.zip
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev
Diffstat (limited to 'docs/components/utilities.md')
-rw-r--r--docs/components/utilities.md16
1 files changed, 13 insertions, 3 deletions
diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index c2ac73bbc..7f3a5cc8d 100644
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -94,13 +94,23 @@ Assign `margin` or `padding` to an element or a subset of its sides with shortha
Easily realign text to components with text alignment classes.
{% example html %}
-<p class="text-left">Left aligned text.</p>
-<p class="text-center">Center aligned text.</p>
-<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
{% endexample %}
+For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
+
+{% example html %}
+<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
+<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
+<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
+
+<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
+<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
+<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
+<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
+{% endexample %}
+
## Text transform
Transform text in components with text capitalization classes.