Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  
  
  
<meta charset=utf-8 />
<title>Center Navigation</title>
</head>
<body>
​
​
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
      </div>
      <div class="collapse navbar-collapse" id="centerednav">
         <ul class="nav navbar-nav">
            <li class="active">
               <a href="#">
                  Home
               </a>
            </li>
            <li>
               <a href="#about">
                  About
               </a>
            </li>
            <li>
               <a href="#contact">
                  Contact
               </a>
            </li>
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Dropdown <b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                  <li>
                     <a href="#">
                        Action
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        Another action
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        Something else here
                     </a>
                  </li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li>
                     <a href="#">
                        Separated link
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        One more separated link
                     </a>
                  </li>
               </ul>
            </li>
         </ul>
      </div>
      <!--/.nav-collapse -->
      
   </div>
   <!-- /.container -->
   
</div>
<!-- /.navbar -->
​
<div class="logobar clearfix">
   <img src="http://i.imgur.com/FL53zwz.png">
   <form role="search">
      <div class="input-group">
         <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
         <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
            </button>
         </div>
      </div>
      <br>
      <p> PH: 09 444 4444 <br>
         FAX: 09 444 4444 </p>
   </form>
</div><!-- /.logobar -->
  
<div class="container">
   <h4 class="text-center">Check out
      <a href="http://bootstrapboogie.com">
         BootstrapBoogie.com
      </a>
      for more Bootstrap tips and
      <a href="http://bootstrapboogie.com">
         Bootstrap themes
      </a>
      .</h4>
</div>  
  
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
carasmopro
0viewers