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">
<!--from  w w  w  .  j ava  2  s .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

Navbar components

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  ava  2s .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;'>

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

Click to view the demo

Nav links

Nav items are simple to add via unordered lists.


<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--  w  w  w  .j  av  a  2 s  .  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;'>
  <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">
<!--from ww  w  .jav a2 s .  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 href="#" class="navbar-brand">Brand</a>
    <p class="navbar-text">Signed in as Mark Otto</p>
  </div>

</body>
</html>

Click to view the demo

Links

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 ww w .j  a  v  a 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 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.