diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2c8dc619aa..27e532f583 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4120,8 +4120,8 @@ button.close {
 .pager li > span {
   display: inline-block;
   padding: 5px 14px;
-  background-color: #fff;
-  border: 1px solid #ddd;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
   border-radius: 15px;
 }
 
diff --git a/less/pager.less b/less/pager.less
index e9f7d98e79..e00a31bd00 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -16,14 +16,14 @@
 .pager li > span {
   display: inline-block;
   padding: 5px 14px;
-  background-color: #fff;
-  border: 1px solid #ddd;
+  background-color: @pagination-bg;
+  border: 1px solid @pagination-border;
   border-radius: 15px;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
-  background-color: #f5f5f5;
+  background-color: @pagination-active-bg;
 }
 .pager .next > a,
 .pager .next > span {
diff --git a/less/pagination.less b/less/pagination.less
index 5292197973..c2158cef0b 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -23,7 +23,7 @@
 .pagination > li > a:focus,
 .pagination > .active > a,
 .pagination > .active > span {
-  background-color: @pagination-bg-active;
+  background-color: @pagination-active-bg;
 }
 .pagination > .active > a,
 .pagination > .active > span {
diff --git a/less/variables.less b/less/variables.less
index e901e70c05..a6cdce5cc1 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -223,8 +223,8 @@
 // -------------------------
 
 @pagination-bg:                        #fff;
-@pagination-bg-active:                 #f5f5f5;
 @pagination-border:                    #ddd;
+@pagination-active-bg:                 #f5f5f5;
 
 
 // Jumbotron