/* Make the masthead heading the same height as the navigation */
<style>
.mastheadh3{
/* Space out content a bit */
margin-top:0;
body{
margin-bottom:0;
padding-top:20px;
line-height:40px;
padding-bottom:20px;
padding-bottom:19px;
}
}
/* Everything but the jumbotron gets side spacing for mobile-first views */
/* Custom container */
.masthead,
.container-narrow{
.marketing,
margin:0auto;
.footer{
max-width:700px;
padding-left:15px;
}
padding-right:15px;
.container-narrow>hr{
}
margin:30px0;
}
/* Custom page header */
.masthead{
/* Main marketing message and sign up button */
border-bottom:1pxsolid#e5e5e5;
.jumbotron{
}
text-align:center;
/* Make the masthead heading the same height as the navigation */
}
.mastheadh3{
.jumbotronh1{
margin-top:0;
font-size:72px;
margin-bottom:0;
line-height:1;
line-height:40px;
}
padding-bottom:19px;
.jumbotron.btn{
}
font-size:21px;
padding:14px24px;
/* Custom container */
}
.container-narrow{
margin:0auto;
/* Supporting marketing content */
max-width:700px;
.marketing{
}
margin:40px0;
.container-narrow>hr{
}
margin:30px0;
.marketingp+h4{
}
margin-top:28px;
}
/* Main marketing message and sign up button */
.jumbotron{
/* Responsive: Portrait tablets and up */
text-align:center;
@mediascreenand(min-width:768px){
}
/* Remove the padding we set earlier */
.jumbotronh1{
.masthead,
font-size:72px;
.marketing,
line-height:1;
.footer{
}
padding-left:0;
.jumbotron.btn{
padding-right:0;
font-size:21px;
}
padding:14px24px;
/* Space out the masthead */
}
.masthead{
margin-bottom:30px;
/* Supporting marketing content */
}
.marketing{
}
margin:40px0;
</style>
}
.marketingp+h4{
margin-top:28px;
}
<divclass="container-narrow">
<divclass="masthead">
/* Responsive: Portrait tablets and up */
<ulclass="nav nav-pills pull-right">
@mediascreenand(min-width:768px){
<liclass="active"><ahref="#">Home</a></li>
/* Remove the padding we set earlier */
<li><ahref="#">About</a></li>
.masthead,
<li><ahref="#">Contact</a></li>
.marketing,
</ul>
.footer{
<h3class="muted">Project name</h3>
padding-left:0;
</div>
padding-right:0;
}
<divclass="jumbotron">
/* Space out the masthead */
<h1>Super awesome marketing speak!</h1>
.masthead{
<pclass="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
margin-bottom:30px;
<p><aclass="btn btn-large btn-success"href="#">Sign up today</a></p>
}
</div>
}
</style>
<divclass="row marketing">
</head>
<divclass="span6">
<h4>Subheading</h4>
<body>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<divclass="container-narrow">
<divclass="masthead">
<h4>Subheading</h4>
<ulclass="nav nav-pills pull-right">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<liclass="active"><ahref="#">Home</a></li>
</div>
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
<divclass="span6">
</ul>
<h4>Subheading</h4>
<h3class="muted">Project name</h3>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
<h4>Subheading</h4>
<divclass="jumbotron">
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h1>Super awesome marketing speak!</h1>
<pclass="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<h4>Subheading</h4>
<p><aclass="btn btn-large btn-success"href="#">Sign up today</a></p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
</div>
<divclass="row marketing">
<divclass="span6">
<hr>
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<pclass="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to <ahref="./sticky-footer.html">the default sticky footer</a> minus the navbar.</p>
</div>
<divid="push"></div>
</div>
</div>
</div>
<divid="footer">
<!-- Begin page content -->
<divclass="container">
<divclass="container">
<pclass="muted credit">Example courtesy <ahref="http://martinbean.co.uk">Martin Bean</a> and <ahref="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
<divclass="page-header">
</div>
<h1>Sticky footer with fixed navbar</h1>
</div>
</div>
<pclass="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to <ahref="./sticky-footer.html">the default sticky footer</a> minus the navbar.</p>
