diff options
| -rw-r--r-- | docs/_includes/css/type.html | 12 | ||||
| -rw-r--r-- | docs/_includes/nav/css.html | 1 | ||||
| -rw-r--r-- | less/type.less | 5 |
3 files changed, 18 insertions, 0 deletions
diff --git a/docs/_includes/css/type.html b/docs/_includes/css/type.html index 65001198d..124e4f087 100644 --- a/docs/_includes/css/type.html +++ b/docs/_includes/css/type.html @@ -204,6 +204,18 @@ You can use the mark tag to <mark>highlight</mark> text. <p class="text-nowrap">No wrap text.</p> {% endhighlight %} + <h2 id="type-transformation">Transformation classes</h2> + <p>Transform text in components with text capitalization classes.</p> + <div class="bs-example"> + <p class="text-lowercase">Lowercase text.</p> + <p class="text-uppercase">Uppercase text.</p> + <p class="text-capitalize">Capitalize text.</p> + </div> +{% highlight html %} +<p class="text-lowercase">Lowercase text.</p> +<p class="text-uppercase">Uppercase text.</p> +<p class="text-capitalize">Capitalize text.</p> +{% endhighlight %} <!-- Abbreviations --> <h2 id="type-abbreviations">Abbreviations</h2> diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html index 5a8d86368..ac86dffce 100644 --- a/docs/_includes/nav/css.html +++ b/docs/_includes/nav/css.html @@ -33,6 +33,7 @@ <li><a href="#type-body-copy">Body copy</a></li> <li><a href="#type-inline-text">Inline text elements</a></li> <li><a href="#type-alignment">Alignment classes</a></li> + <li><a href="#type-transformation">Transformation classes</a></li> <li><a href="#type-abbreviations">Abbreviations</a></li> <li><a href="#type-addresses">Addresses</a></li> <li><a href="#type-blockquotes">Blockquotes</a></li> diff --git a/less/type.less b/less/type.less index 101c81e72..93414474a 100644 --- a/less/type.less +++ b/less/type.less @@ -98,6 +98,11 @@ mark, .text-justify { text-align: justify; } .text-nowrap { white-space: nowrap; } +// Transformation +.text-lowercase { text-transform: lowercase; } +.text-uppercase { text-transform: uppercase; } +.text-capitalize { text-transform: capitalize; } + // Contextual colors .text-muted { color: @text-muted; |