<pclass="lead">Use these examples as starting points for your work with Bootstrap. We encourage everyone to iterate on these examples and not simply use them as an end result.</p>
<pclass="lead">We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<pclass="lead">{{_i}}Use these examples as starting points for your work with Bootstrap. We encourage everyone to iterate on these examples and not simply use them as an end result.{{/i}}</p>
<pclass="lead">{{_i}}We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}</p>
<pclass="navbar-text pull-right">Logged in as <ahref="#">username</a></p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<divclass="container-fluid">
<divclass="row-fluid">
<divclass="span9">
<divclass="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><aclass="btn btn-primary btn-large">Learn more »</a></p>
</div>
<divclass="row-fluid">
<divclass="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
padding-top:40px;/* 40px to make the container go all the way to the bottom of the topbar */
padding-top:60px;/* 60px to make the container go all the way to the bottom of the topbar */
}
.container>footerp{
text-align:center;/* center align it with the container */
}
.container{
width:820px;/* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 10 columns and not 12. */
}
/* The white background content wrapper */
.body-content{
background-color:#fff;
padding:20px;
margin:0-20px18px;/* negative indent the amount of the padding to maintain the grid system */
-webkit-border-radius:006px6px;
-moz-border-radius:006px6px;
border-radius:006px6px;
-webkit-box-shadow:01px2pxrgba(0,0,0,.15);
-moz-box-shadow:01px2pxrgba(0,0,0,.15);
box-shadow:01px2pxrgba(0,0,0,.15);
}
/* Page header tweaks */
.page-header{
background-color:#f5f5f5;
padding:20px20px10px;
margin:-20px-20px20px;
}
/* Styles you shouldn't keep as they are for displaying this base example only */
.body-content.span7,
.body-content.span3{
min-height:500px;
}
/* Give a quick and non-cross-browser friendly divider */
