Bootstrap grid columns does not seem to be working properly-CodePudding

I'm using Bootstrap 3 and I have set up this grid for my webpage:

<div >
    <div >
         <div >
              <div >
                   <div >
                        <img src="https://sitename.com/logo.jpg">
                   </div>
                   <div >
                        <!-- Search box & Navbar comes here -->
                   </div>
                   <div  style="margin-top:30px !important;">
                        <a href="#"><i ></i></a>
                   </div>
                   <div >
                        <form method="POST" action="">
                           <div >
                               <input type="email"  id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                           </div>
                           <div >
                               <input type="password"  id="exampleInputPassword1" placeholder="Password">
                           </div>
                           <button type="submit" >Submit</button>
                        </form>
                  </div>
             </div>
         </div>
     </div>
</div>

And the result is shown in this screenshot.

As you can see the Bootstrap form does not appear in the col-3 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 col-3.

So what's going wrong here? How can I solve this issue?

CodePudding user response：

You should use col-xs-1 col-xs-7 col-xs-3 in your class (instead col-7) or any size and display what you want.