Bootstrap Tutorial - Create Navbar with Bootstrap








Basic navbar

To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content. 

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--   w w w .  j  a  va  2s.c om-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>

  <div class="navbar">
    <a class="navbar-brand" href="#">Title</a>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</body>
</html>

Click to view the demo





A simple link to show your brand or project name only requires an anchor tag. 

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from   w  w  w  .j  a v  a  2 s  .  co m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>

  <a class="navbar-brand" href="#">Title</a>
</body>
</html>

Click to view the demo





Nav items are simple to add via unordered lists. 

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from   w  w w .j  a va 2  s  .  com-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a href="#">Disabled</a></li>
  </ul>
</body>
</html>

Click to view the demo

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color. 

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--  w  w w  . j  a va 2 s  . c o m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>

  <div class="navbar">
    <a href="#" class="navbar-brand">Brand</a>
    <p class="navbar-text">Signed in as Mark Otto</p>
  </div>

</body>
</html>

Click to view the demo

For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options. 

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from  w w w  . j  a  v  a2s .co m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>

  <div class="navbar">
    <a href="#" class="navbar-brand">Brand</a>
    <p class="navbar-text pull-right">
      Signed in as <a href="#" class="navbar-link">Mark Otto</a>
    </p>
  </div>

</body>
</html>

Click to view the demo

Component alignment

Align nav links, forms, buttons, or text, using the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <ul> with the respective utility class applied.