title: bootstrap col-md issues taking full width
body: <p>I was trying to implement bootstrap in my project..But the col-md-3 is taking the full width of a container</p>
  
  <p>The following is the code:-</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Home page &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4-offset-4"&gt;
         &lt;div class="avatar"&gt;
           &lt;h1&gt;Special feature&lt;/h1&gt;
         &lt;/div&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  
    &lt;div class="containe-fluid"&gt;
      &lt;div class="row" &gt;
  
        &lt;div class="col-md-3" style="width:25%;"&gt;
          &lt;div class="box"&gt;
            &lt;img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300"&gt;
            &lt;p&gt;
                  &lt;a href=""&gt;Dell Latitude E4300 Refurbished Laptop&lt;br&gt;  $169
            &lt;/p&gt;
            &lt;button&gt; Buy&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-3" style="width:25%;"&gt;
          &lt;div class="box"&gt;
          &lt;img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300"&gt;
            &lt;p&gt;
              &lt;a href="#"&gt;HP 255 UBUNTU&lt;/a&gt;&lt;br&gt;$229.00
            &lt;/p&gt;
            &lt;button&gt; Buy&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-3" style="width:25%;"&gt;
          &lt;div class="box"&gt;
            &lt;img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300"&gt;
            &lt;p&gt;
              &lt;a href="#"&gt;Lenovo Thinkpad B50&lt;/a&gt;&lt;br&gt;$229.00
            &lt;/p&gt;
            &lt;button&gt;Buy&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-3" style="width:25%;"&gt;
          &lt;div class="box"&gt;
            &lt;img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300"&gt;
            &lt;p&gt;
                  &lt;a href="#"&gt;HP 255 Quad Core&lt;/a&gt;&lt;br&gt; $269.00
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am unable to put the diffent products in one line and it is coming one below the other
  Please help me am a newbie and am caught up.</p>