title: Bootstrap grid columns does not seem to be working properly
body: <p>I'm using Bootstrap 3 and I have set up this grid for my webpage:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="header"&gt;
           &lt;div class="top-nav"&gt;
                &lt;div class="row"&gt;
                     &lt;div class="col-1"&gt;
                          &lt;img src="https://sitename.com/logo.jpg"&gt;
                     &lt;/div&gt;
                     &lt;div class="col-7 mid-nav"&gt;
                          &lt;!-- Search box &amp; Navbar comes here --&gt;
                     &lt;/div&gt;
                     &lt;div class="col-1" style="margin-top:30px !important;"&gt;
                          &lt;a href="#"&gt;&lt;i class="fa fa-shopping-cart fa-4x sabad-kharid"&gt;&lt;/i&gt;&lt;/a&gt;
                     &lt;/div&gt;
                     &lt;div class="col-3"&gt;
                          &lt;form method="POST" action=""&gt;
                             &lt;div class="form-group"&gt;
                                 &lt;input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"&gt;
                             &lt;/div&gt;
                             &lt;div class="form-group"&gt;
                                 &lt;input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"&gt;
                             &lt;/div&gt;
                             &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                          &lt;/form&gt;
                    &lt;/div&gt;
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And the result is shown in this:</p>
  <p><a href="https://i.stack.imgur.com/NvgGv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NvgGv.png" alt="enter image description here" /></a></p>
  <p>As you can see the Bootstrap form does not appear in the <code>col-3</code> class and it appears at the below of this row. However it should be placed at the left side in the div with class of <code>col-3</code>.</p>
  <p>So what's going wrong here? How can I solve this issue?</p>