.page => .page-item

3 files changed, 28 insertions, 28 deletions

diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index a560dbde3..4230a6647 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -18,18 +18,18 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
 {% example html %}
 <nav>
   <ul class="pagination">
-    <li class="page">
+    <li class="page-item">
       <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="page"><a class="page-link" href="#">1</a></li>
-    <li class="page"><a class="page-link" href="#">2</a></li>
-    <li class="page"><a class="page-link" href="#">3</a></li>
-    <li class="page"><a class="page-link" href="#">4</a></li>
-    <li class="page"><a class="page-link" href="#">5</a></li>
-    <li class="page">
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item"><a class="page-link" href="#">4</a></li>
+    <li class="page-item"><a class="page-link" href="#">5</a></li>
+    <li class="page-item">
       <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
@@ -46,20 +46,20 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
 {% example html %}
 <nav>
   <ul class="pagination">
-    <li class="page disabled">
+    <li class="page-item disabled">
       <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="page active">
+    <li class="page-item active">
       <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
     </li>
-    <li class="page"><a class="page-link" href="#">2</a></li>
-    <li class="page"><a class="page-link" href="#">3</a></li>
-    <li class="page"><a class="page-link" href="#">4</a></li>
-    <li class="page"><a class="page-link" href="#">5</a></li>
-    <li class="page">
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item"><a class="page-link" href="#">4</a></li>
+    <li class="page-item"><a class="page-link" href="#">5</a></li>
+    <li class="page-item">
       <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
@@ -74,13 +74,13 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
 {% example html %}
 <nav>
   <ul class="pagination">
-    <li class="page disabled">
+    <li class="page-item disabled">
       <span class="page-link" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </span>
     </li>
-    <li class="page active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li>
+    <li class="page-item active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li>
   </ul>
 </nav>
 {% endexample %}
@@ -93,16 +93,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 {% example html %}
 <nav>
   <ul class="pagination pagination-lg">
-    <li class="page">
+    <li class="page-item">
       <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="page"><a class="page-link" href="#">1</a></li>
-    <li class="page"><a class="page-link" href="#">2</a></li>
-    <li class="page"><a class="page-link" href="#">3</a></li>
-    <li class="page">
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
       <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
@@ -115,16 +115,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 {% example html %}
 <nav>
   <ul class="pagination pagination-sm">
-    <li class="page">
+    <li class="page-item">
       <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="page"><a class="page-link" href="#">1</a></li>
-    <li class="page"><a class="page-link" href="#">2</a></li>
-    <li class="page"><a class="page-link" href="#">3</a></li>
-    <li class="page">
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
       <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 26a7102c1..10559516f 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -6,7 +6,7 @@
   @include border-radius();
 }
 
-.page {
+.page-item {
   display: inline; // Remove list-style and block-level defaults
 
   &:first-child {
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index 8d722004e..eaebe8955 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -7,7 +7,7 @@
     line-height: $line-height;
   }
 
-  .page {
+  .page-item {
     &:first-child {
       .page-link {
         @include border-left-radius($border-radius);