diff --git a/components.html b/components.html
index 3f177a840d..d6e25cfc1c 100644
--- a/components.html
+++ b/components.html
@@ -733,14 +733,14 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
 
       <div class="navbar">
         <form class="navbar-form pull-left">
-          <input type="text" style="width: 200px;">
+          <input type="text" class="form-control" style="width: 200px;">
           <button type="submit" class="btn btn-default">Submit</button>
         </form>
       </div>
 
       <div class="navbar">
         <form class="navbar-form pull-left">
-          <select name="" id="" style="width: 200px;">
+          <select name="" id="" class="form-control" style="width: 200px;">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
@@ -752,7 +752,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
 
       <div class="navbar">
         <form class="navbar-form pull-left">
-          <input type="text" style="width: 200px;">
+          <input type="text" class="form-control" style="width: 200px;">
           <input type="checkbox">
           <button type="submit" class="btn btn-default">Submit</button>
         </form>
@@ -760,7 +760,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
 
       <div class="navbar">
         <form class="navbar-form pull-left">
-          <input type="text" style="width: 200px;">
+          <input type="text" class="form-control" style="width: 200px;">
           <label class="checkbox-inline">
             <input type="checkbox"> Remember me
           </label>
@@ -771,7 +771,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
     </div><!-- /example -->
 {% highlight html %}
 <form class="navbar-form pull-left">
-  <input type="text" style="width: 200px;">
+  <input type="text" class="form-control" style="width: 200px;">
   <button type="submit" class="btn btn-default">Submit</button>
 </form>
 {% endhighlight %}
@@ -934,7 +934,7 @@ body { padding-bottom: 70px; }
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="col-lg-8" placeholder="Search">
+              <input type="text" class="form-control col-lg-8" placeholder="Search">
             </form>
             <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
@@ -1011,7 +1011,7 @@ body { padding-bottom: 70px; }
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="col-lg-8" placeholder="Search">
+              <input type="text" class="form-control col-lg-8" placeholder="Search">
             </form>
             <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>