diff --git a/docs/content/typography.md b/docs/content/typography.md
index bc2a85c63e..d8cd4b010b 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -209,9 +209,9 @@ Place all list items on a single line with `display: inline-block;` and some lig
 
 {% example html %}
 <ul class="list-inline">
-  <li>Lorem ipsum</li>
-  <li>Phasellus iaculis</li>
-  <li>Nulla volutpat</li>
+  <li class="list-inline-item">Lorem ipsum</li>
+  <li class="list-inline-item">Phasellus iaculis</li>
+  <li class="list-inline-item">Nulla volutpat</li>
 </ul>
 {% endexample %}
 
diff --git a/scss/_type.scss b/scss/_type.scss
index 6759677aa9..ea682812ea 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -93,12 +93,12 @@ mark,
 .list-inline {
   @include list-unstyled;
   margin-left: -$list-inline-padding;
+}
 
-  > li {
-    display: inline-block;
-    padding-right: $list-inline-padding;
-    padding-left: $list-inline-padding;
-  }
+.list-inline-item {
+  display: inline-block;
+  padding-right: $list-inline-padding;
+  padding-left: $list-inline-padding;
 }
 
 // Horizontal description lists w/ grid classes