Fixes #12610: Better and more consistent prefixing of docs CSS with .bs-docs-

docs/index.html

@@ -3,9 +3,9 @@ layout: home
 title: Bootstrap
 ---
 
-<main class="bs-masthead" id="content" role="main">
+<main class="bs-docs-masthead" id="content" role="main">
   <div class="container">
-    <span class="bs-booticon bs-booticon-lg bs-booticon-outline">B</span>
+    <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
     <!-- <h1>Bootstrap</h1> -->
     <p class="lead">The most popular front-end framework for developing responsive, mobile first projects on the web.</p>
     <p class="lead">
@@ -15,9 +15,9 @@ title: Bootstrap
   </div>
 </main>
 
-<div class="bs-featurette">
+<div class="bs-docs-featurette">
   <div class="container">
-    <h2 class="bs-featurette-title">Designed for everyone, everywhere.</h2>
+    <h2 class="bs-docs-featurette-title">Designed for everyone, everywhere.</h2>
     <p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
 
     <hr class="half-rule">
@@ -47,14 +47,14 @@ title: Bootstrap
   </div>
 </div>
 
-<div class="bs-featurette">
+<div class="bs-docs-featurette">
   <div class="container">
-    <h2 class="bs-featurette-title">Built with Bootstrap.</h2>
+    <h2 class="bs-docs-featurette-title">Built with Bootstrap.</h2>
     <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
 
     <hr class="half-rule">
 
-    <div class="row bs-featured-sites">
+    <div class="row bs-docs-featured-sites">
     {% for showcase in site.data.showcase %}
       <div class="col-sm-3">
         <a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">