diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html
index d9a7564d..4c421b4b 100644
--- a/docs/_includes/nav-home.html
+++ b/docs/_includes/nav-home.html
@@ -1,6 +1,6 @@
 <header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
   {% comment %}
-  <nav class="nav navbar-nav pull-right">
+  <nav class="nav navbar-nav pull-xs-right">
     <div class="nav-item dropdown">
       <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         v{{ site.data.version }}
@@ -26,7 +26,7 @@
 
   <nav>
     <div class="clearfix">
-      <button class="navbar-toggler pull-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
         &#9776;
       </button>
       <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
diff --git a/docs/examples/dashboard-bs4/index.html b/docs/examples/dashboard-bs4/index.html
index f2121322..ef3bdf31 100644
--- a/docs/examples/dashboard-bs4/index.html
+++ b/docs/examples/dashboard-bs4/index.html
@@ -23,7 +23,7 @@ group: material-design
       <a class="nav-item nav-link" href="#">Profile</a>
       <a class="nav-item nav-link" href="#">Help</a>
     </nav>
-    <form class="pull-right">
+    <form class="pull-xs-right">
       <input type="text" class="form-control" placeholder="Search...">
     </form>
   </div>
diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html
index 0a165c64..f8fa8f6d 100644
--- a/docs/examples/offcanvas/index.html
+++ b/docs/examples/offcanvas/index.html
@@ -24,7 +24,7 @@ group: material-design
   <div class="row row-offcanvas row-offcanvas-right">
 
     <div class="col-xs-12 col-sm-9">
-      <p class="pull-right">
+      <p class="pull-xs-right">
         <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
       </p>
       <div class="jumbotron">
diff --git a/docs/material-design/collapse-inline.md b/docs/material-design/collapse-inline.md
index 65ddf28e..0fd2a610 100644
--- a/docs/material-design/collapse-inline.md
+++ b/docs/material-design/collapse-inline.md
@@ -51,7 +51,7 @@ Below is a list of relevant classes options:
 Click the search icon below (on the right).  
 
 {% example html %}
-<div class="mdb-form-group mdb-collapse-inline pull-right">
+<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
   <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
     <i class="material-icons">search</i>
   </button>  
diff --git a/docs/material-design/menus.md b/docs/material-design/menus.md
index cdc00dd5..0893854e 100644
--- a/docs/material-design/menus.md
+++ b/docs/material-design/menus.md
@@ -98,7 +98,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 
 ### Lower right side
 {% example html %}
-<div class="dropdown open pull-right">
+<div class="dropdown open pull-xs-right">
   <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>
@@ -130,7 +130,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 
 ### Top right side
 {% example html %}
-<div class="dropdown open pull-right">
+<div class="dropdown open pull-xs-right">
   <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="tr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>
@@ -151,7 +151,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 ### Minimum width
 
 {% example html %}
-<div class="dropdown open pull-right">
+<div class="dropdown open pull-xs-right">
   <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>
@@ -166,7 +166,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 ### Maximum width
 
 {% example html %}
-<div class="dropdown open pull-right">
+<div class="dropdown open pull-xs-right">
   <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>
diff --git a/docs/material-design/test.md b/docs/material-design/test.md
index 51969f8f..ebf49875 100644
--- a/docs/material-design/test.md
+++ b/docs/material-design/test.md
@@ -25,7 +25,7 @@ group: material-design
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline pull-right">
+    <form class="form-inline pull-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-success-outline" type="submit">Search</button>
     </form>