diff options
| author | Mark Otto <[email protected]> | 2015-11-29 19:54:20 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-11-29 19:54:20 -0800 |
| commit | 0fa2c7c4866a4ada900a0bebd45ab8b741db6788 (patch) | |
| tree | 9aca4400012f25b1fb2f5f03f70cc658da9199a9 /docs/components/utilities.md | |
| parent | 765c5e9c07610a713a89e1664d6df539cdea44b4 (diff) | |
| parent | c68019e5d0ac1eba6cda998a0f4067809a10c443 (diff) | |
| download | bootstrap-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.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. |
