diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index 90d377a63e..13ad8598f5 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -24,7 +24,7 @@
   <body>
 
     <nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
-      <button type="button" class="navbar-toggler visible-xs" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+      <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html
index 72e9f6bcd5..3c4c68df6c 100644
--- a/docs/examples/grid/index.html
+++ b/docs/examples/grid/index.html
@@ -150,7 +150,7 @@
         <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 
         <!-- Add the extra clearfix for only the required viewport -->
-        <div class="clearfix visible-xs"></div>
+        <div class="clearfix hidden-sm-up"></div>
 
         <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
         <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html
index 115562ae8d..3da9f9d7a4 100644
--- a/docs/examples/offcanvas/index.html
+++ b/docs/examples/offcanvas/index.html
@@ -48,7 +48,7 @@
       <div class="row row-offcanvas row-offcanvas-right">
 
         <div class="col-xs-12 col-sm-9">
-          <p class="pull-right visible-xs">
+          <p class="pull-right hidden-sm-up">
             <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
           </p>
           <div class="jumbotron">
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index c6983a62ea..59ad79d391 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -317,7 +317,7 @@ Build on the previous example by creating even more dynamic and powerful layouts
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   <!-- Optional: clear the XS cols if their content doesn't match in height -->
-  <div class="clearfix visible-xs-block"></div>
+  <div class="clearfix hidden-sm-up"></div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 </div>
 {% endexample %}
@@ -348,7 +348,7 @@ With the four tiers of grids available you're bound to run into issues where, at
   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 
   <!-- Add the extra clearfix for only the required viewport -->
-  <div class="clearfix visible-xs-block"></div>
+  <div class="clearfix hidden-sm-up"></div>
 
   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
