The following code shows how to create Fluid Layout.
<!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">
.container-fluid .row {<!--from ww w.jav a 2s . c o m-->
margin: 0;
}
</style>
</head>
<body>
<nav id="myNavbar"
class="navbar navbar-default navbar-inverse navbar-fixed-top"
role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<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-fluid">
<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 »</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 »</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 »</a>
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<footer>
<p>© Copyright 2013 Tutorial</p>
</footer>
</div>
</div>
</div>
</body>
</html>