<div class="bs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
- <p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+ <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
</div>
{% highlight html %}
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
- <p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+ <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
{% endhighlight %}
<div class="bs-callout">
<h4>Body padding required</h4>
- <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code><body></code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
+ <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight css %}
-body {
- padding-top: 64px;
-}
-@media screen and (min-width: 768px) {
- body {
- padding-top: 60px;
- }
-}
+body { padding-top: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
<div class="bs-callout">
<h4>Body padding required</h4>
- <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code><body></code>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:</p>
+ <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight css %}
-body {
- padding-bottom: 64px;
-}
-@media screen and (min-width: 768px) {
- body {
- padding-bottom: 60px;
- }
-}
+body { padding-bottom: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>