Bootstrap CSS in header is causing alot of issues

[ramm4]

Folks,
New to VBulletin, sort of to CSS, been scratching my head since September over this. I'd love some help. I am modifying the Default Skin, with the sole intent that it looks exactly like the other parts of my website.

To do this, I added some pretty basic Bootstrap CSS to the header template. Now, some odd things are occurring. I have a feeling it has to do with the Bootstrap CSS messing around with VB5 CSS.

First, screen shots:

1. Register Page Blank (see attachment)
2. Search Button Pushed Down (see attachment)
3. Topic Button Pushed Down (see attachment)

Now, here's the Bootstrap CSS I added in the Header template

<!-- css -->
  <link href="https://fonts.googleapis.com/css?family=Handlee|Open+Sans:300,400,600,700,800" rel="stylesheet">
  <link href="http://localhost/project/css/bootstrap.css" rel="stylesheet" />
  <link href="http://localhost/project/css/bootstrap-responsive.css" rel="stylesheet" />
 
  <link href="http://localhost/project/css/style.css" rel="stylesheet" />

  <!-- Theme skin -->
  <link href="http://localhost/project/color/default.css" rel="stylesheet" />

 

Now, for the menu:

 <!-- start header -->
  <header>
   <div class="top">
      <div class="container">
         <div class="row">
            <div class="span6">
               <p class="topcontact">Welcome</p>
            </div>
            <div class="span6">
               <ul class="social-network">
                  <li><a href="https://www.facebook.com" data-placement="bottom" title="Facebook"><i class="icon-facebook icon-white"></i></a></li>
                  <li><a href="https://www.instagram.com/" data-placement="bottom" title="Instagram"><i class="icon-camera icon-white"></i></a></li>
               </ul>
            </div>
         </div>
      </div>
   </div>
   <div class="container">
      <div class="row nomargin">
         <div class="span4">
            <div class="logo">
               <a href="index.php"><img src="http://localhost/project/img/logo1.png" alt="" /></a>
            </div>
         </div>
         <div class="span8">
            <div class="navbar navbar-static-top">
               <div class="navigation">
                  <nav>
                     <ul class="nav topnav">
                        <li class="dropdown">
                           <a href="index.php"><i class="icon-home"></i> HOME</a>
                        </li>
                    
                        <li class="dropdown">
                           <a href="#"><i class="icon-globe"></i> COMMUNITY <i class="icon-angle-down"></i></a>
                           <ul class="dropdown-menu">
                              <li><a href="about.html">Register for Free</a></li>
                              <li><a href="about.html">Browse the Forums</a></li>
                           </ul>
                        </li>
                        <li >
                           <a href="about.html"><i class="icon-info-sign"></i> ABOUT</a>
                        </li>
                        <li>
                           <a href="contact.html"><i class="icon-phone"></i> CONTACT</a>
                        </li>
                     </ul>
                  </nav>
               </div>
               <!-- end navigation -->
            </div>
         </div>
      </div>
   </div>
</header>
    <!-- end header -->

That's it! I can't imagine the above is causing these odd issues. Not to mention, the user can't login (when they hover over "login", the input fields appear, then dissapear right away).

Any help, is extremely appreciated.

Rob