Bootstrap Tutorial - Bootstrap Navigation Bar alignment

Fixed to top

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar. These will also remove rounded corners.

Add .navbar-fixed-top.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w w  w . jav a  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;'>

  <div class="navbar navbar-fixed-top">
    <div class="container" style="width: auto;">
      <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>
  </div>

</body>
</html>

Click to view the demo

Fixed to bottom

Add .navbar-fixed-bottom instead.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!-- www  .java2 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 navbar-fixed-bottom">
    <div class="container" style="width: auto;">
      <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>
  </div>

</body>
</html>

Click to view the demo