<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<p>Align nav links, forms, buttons, or text, using the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p>
<h2>Optional display variations</h2>
<h2>Optional display variations</h2>
...
@@ -1215,16 +1215,9 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
...
@@ -1215,16 +1215,9 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<divclass="bs-callout">
<divclass="bs-callout">
<h4>Body padding required</h4>
<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 %}
{% highlight css %}
body {
body { padding-top: 70px; }
padding-top: 64px;
}
@media screen and (min-width: 768px) {
body {
padding-top: 60px;
}
}
{% endhighlight %}
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
</div>
...
@@ -1251,16 +1244,9 @@ body {
...
@@ -1251,16 +1244,9 @@ body {
<divclass="bs-callout">
<divclass="bs-callout">
<h4>Body padding required</h4>
<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 %}
{% highlight css %}
body {
body { padding-bottom: 70px; }
padding-bottom: 64px;
}
@media screen and (min-width: 768px) {
body {
padding-bottom: 60px;
}
}
{% endhighlight %}
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
@@ -1051,8 +1051,8 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1051,8 +1051,8 @@ For example, <code><section></code> should be wrapped as inline.
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
@@ -1132,7 +1132,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1132,7 +1132,7 @@ For example, <code><section></code> should be wrapped as inline.
<h4>Type declaration required</h4>
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div>
</div>
<formclass="bs-example form-inline">
<formclass="bs-example">
<inputtype="text"placeholder="Text input">
<inputtype="text"placeholder="Text input">
</form>
</form>
{% highlight html %}
{% highlight html %}
...
@@ -1141,7 +1141,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1141,7 +1141,7 @@ For example, <code><section></code> should be wrapped as inline.
<h3>Textarea</h3>
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<formclass="bs-example form-inline">
<formclass="bs-example">
<textarearows="3"></textarea>
<textarearows="3"></textarea>
</form>
</form>
{% highlight html %}
{% highlight html %}
...
@@ -1257,7 +1257,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1257,7 +1257,7 @@ For example, <code><section></code> should be wrapped as inline.
<h3id="forms-input-focus">Input focus</h3>
<h3id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<formclass="bs-example form-inline">
<formclass="bs-example">
<inputclass="focused"id="focusedInput"type="text"value="This is focused...">
<inputclass="focused"id="focusedInput"type="text"value="This is focused...">
</form>
</form>
{% highlight html %}
{% highlight html %}
...
@@ -1272,7 +1272,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1272,7 +1272,7 @@ For example, <code><section></code> should be wrapped as inline.
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>