diff options
Diffstat (limited to 'docs/components/utilities.md')
| -rw-r--r-- | docs/components/utilities.md | 16 |
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. |