diff --git a/docs/_includes/css/type.html b/docs/_includes/css/type.html
index da81d7414a..57ee72b920 100644
--- a/docs/_includes/css/type.html
+++ b/docs/_includes/css/type.html
@@ -203,6 +203,18 @@ You can use the mark tag to <mark>highlight</mark> text.
 <p class="text-justify">Justified 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 5a8d86368d..ac86dffcec 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 384cacc8e8..d76298e578 100644
--- a/less/type.less
+++ b/less/type.less
@@ -97,6 +97,11 @@ mark,
 .text-center         { text-align: center; }
 .text-justify        { text-align: justify; }
 
+// Transformation
+.text-lowercase      { text-transform: lowercase; }
+.text-uppercase      { text-transform: uppercase; }
+.text-capitalize     { text-transform: capitalize; }
+
 // Contextual colors
 .text-muted {
   color: @text-muted;