Bootstrap Tutorial - Create Fixed Layout








The following code shows how to create Fixed Layout.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript"
  src="http://code.jquery.com/jquery.min.js"></script>
<script
  src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
body {<!--   w  w w.j a  v  a2 s. c om-->
  padding-top: 70px;
}
</style>
</head>
<body>
  <nav id="myNavbar"
    class="navbar navbar-default navbar-inverse navbar-fixed-top"
    role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
          data-target="#navbarCollapse">
          <span class="sr-only">Toggle navigation</span> <span
            class="icon-bar"></span> <span class="icon-bar"></span> <span
            class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Tutorial</a>
      </div>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="http://www.java2s.com"
            target="_blank">Home</a></li>
          <li><a href="http://www.java2s.com"
            target="_blank">About</a></li>
          <li><a href="http://www.java2s.com"
            target="_blank">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="jumbotron">
      <h1>Learn to Create Websites</h1>
      <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque.
            Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam
            porttitor condimentum nisi, eu viverra ipsum porta ut. Nam
            hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
            volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc
            facilisis leo at faucibus adipiscing. Duis auctor dictum erat
            hendrerit dapibus.</p>
      <p>
        <a href="http://www.java2s.com" target="_blank"
          class="btn btn-success btn-lg">Get started today</a>
      </p>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <h2>HTML</h2>
        <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque.
            Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam
            porttitor condimentum nisi, eu viverra ipsum porta ut. Nam
            hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
            volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc
            facilisis leo at faucibus adipiscing. Duis auctor dictum erat
            hendrerit dapibus.</p>
        <p>
          <a href="http://www.java2s.com/"
            target="_blank" class="btn btn-success">Learn More &raquo;</a>
        </p>
      </div>
      <div class="col-xs-4">
        <h2>CSS</h2>
        <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque.
            Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam
            porttitor condimentum nisi, eu viverra ipsum porta ut. Nam
            hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
            volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc
            facilisis leo at faucibus adipiscing. Duis auctor dictum erat
            hendrerit dapibus.</p>
        <p>
          <a href="http://www.java2s.com/"
            target="_blank" class="btn btn-success">Learn More &raquo;</a>
        </p>
      </div>
      <div class="col-xs-4">
        <h2>Bootstrap</h2>
        <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque.
            Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam
            porttitor condimentum nisi, eu viverra ipsum porta ut. Nam
            hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
            volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc
            facilisis leo at faucibus adipiscing. Duis auctor dictum erat
            hendrerit dapibus.</p>
        <p>
          <a href="http://www.java2s.com/"
            target="_blank" class="btn btn-success">Learn More &raquo;</a>
        </p>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-xs-12">
        <footer>
          <p>&copy; Copyright 2013 Tutorial</p>
        </footer>
      </div>
    </div>
  </div>
</body>
</html>

Click to view the demo