Merge pull request #13671 from 04818419/text-transformation

text transformation added

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>

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>

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;