<spanclass="nt"><input</span><spanclass="na">type=</span><spanclass="s">"text"</span><spanclass="na">class=</span><spanclass="s">"form-control"</span><spanclass="na">aria-label=</span><spanclass="s">"Amount (to the nearest dollar)"</span><spanclass="nt">></span>
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
<p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
<p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strongclass="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strongclass="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<p>You can optionally swap out active or disabled anchors for <code><span></code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
<p>You can optionally swap out active or disabled anchors for <code><span></code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
@@ -1153,19 +1153,19 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1153,19 +1153,19 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>1</td>
<thscope="row">1</th>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>Otto</td>
<td>@mdo</td>
<td>@mdo</td>
</tr>
</tr>
<tr>
<tr>
<td>2</td>
<thscope="row">2</th>
<td>Jacob</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Thornton</td>
<td>@fat</td>
<td>@fat</td>
</tr>
</tr>
<tr>
<tr>
<td>3</td>
<thscope="row">3</th>
<td>Larry</td>
<td>Larry</td>
<td>the Bird</td>
<td>the Bird</td>
<td>@twitter</td>
<td>@twitter</td>
...
@@ -1196,19 +1196,19 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1196,19 +1196,19 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>1</td>
<thscope="row">1</th>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>Otto</td>
<td>@mdo</td>
<td>@mdo</td>
</tr>
</tr>
<tr>
<tr>
<td>2</td>
<thscope="row">2</th>
<td>Jacob</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Thornton</td>
<td>@fat</td>
<td>@fat</td>
</tr>
</tr>
<tr>
<tr>
<td>3</td>
<thscope="row">3</th>
<td>Larry</td>
<td>Larry</td>
<td>the Bird</td>
<td>the Bird</td>
<td>@twitter</td>
<td>@twitter</td>
...
@@ -1235,25 +1235,21 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1235,25 +1235,21 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<tdrowspan="2">1</td>
<thscope="row">1</th>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>Otto</td>
<td>@mdo</td>
<td>@mdo</td>
</tr>
</tr>
<tr>
<tr>
<td>Mark</td>
<thscope="row">2</th>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Thornton</td>
<td>@fat</td>
<td>@fat</td>
</tr>
</tr>
<tr>
<tr>
<td>3</td>
<thscope="row">3</th>
<tdcolspan="2">Larry the Bird</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td>@twitter</td>
</tr>
</tr>
</tbody>
</tbody>
...
@@ -1278,20 +1274,21 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1278,20 +1274,21 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>1</td>
<thscope="row">1</th>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>Otto</td>
<td>@mdo</td>
<td>@mdo</td>
</tr>
</tr>
<tr>
<tr>
<td>2</td>
<thscope="row">2</th>
<td>Jacob</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Thornton</td>
<td>@fat</td>
<td>@fat</td>
</tr>
</tr>
<tr>
<tr>
<td>3</td>
<thscope="row">3</th>
<tdcolspan="2">Larry the Bird</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td>@twitter</td>
</tr>
</tr>
</tbody>
</tbody>
...
@@ -1316,19 +1313,19 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1316,19 +1313,19 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>1</td>
<thscope="row">1</th>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>Otto</td>
<td>@mdo</td>
<td>@mdo</td>
</tr>
</tr>
<tr>
<tr>
<td>2</td>
<thscope="row">2</th>
<td>Jacob</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Thornton</td>
<td>@fat</td>
<td>@fat</td>
</tr>
</tr>
<tr>
<tr>
<td>3</td>
<thscope="row">3</th>
<tdcolspan="2">Larry the Bird</td>
<tdcolspan="2">Larry the Bird</td>
<td>@twitter</td>
<td>@twitter</td>
</tr>
</tr>
...
@@ -1356,33 +1353,33 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1356,33 +1353,33 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>
<thscope="row">
<code>.active</code>
<code>.active</code>
</td>
</th>
<td>Applies the hover color to a particular row or cell</td>
<td>Applies the hover color to a particular row or cell</td>
</tr>
</tr>
<tr>
<tr>
<td>
<thscope="row">
<code>.success</code>
<code>.success</code>
</td>
</th>
<td>Indicates a successful or positive action</td>
<td>Indicates a successful or positive action</td>
</tr>
</tr>
<tr>
<tr>
<td>
<thscope="row">
<code>.info</code>
<code>.info</code>
</td>
</th>
<td>Indicates a neutral informative change or action</td>
<td>Indicates a neutral informative change or action</td>
</tr>
</tr>
<tr>
<tr>
<td>
<thscope="row">
<code>.warning</code>
<code>.warning</code>
</td>
</th>
<td>Indicates a warning that might need attention</td>
<td>Indicates a warning that might need attention</td>
</tr>
</tr>
<tr>
<tr>
<td>
<thscope="row">
<code>.danger</code>
<code>.danger</code>
</td>
</th>
<td>Indicates a dangerous or potentially negative action</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tr>
</tbody>
</tbody>
...
@@ -1400,55 +1397,55 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1400,55 +1397,55 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
</thead>
</thead>
<tbody>
<tbody>
<trclass="active">
<trclass="active">
<td>1</td>
<thscope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tr>
<tr>
<tr>
<td>2</td>
<thscope="row">2</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tr>
<trclass="success">
<trclass="success">
<td>3</td>
<thscope="row">3</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tr>
<tr>
<tr>
<td>4</td>
<thscope="row">4</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tr>
<trclass="info">
<trclass="info">
<td>5</td>
<thscope="row">5</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tr>
<tr>
<tr>
<td>6</td>
<thscope="row">6</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tr>
<trclass="warning">
<trclass="warning">
<td>7</td>
<thscope="row">7</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tr>
<tr>
<tr>
<td>8</td>
<thscope="row">8</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tr>
<trclass="danger">
<trclass="danger">
<td>9</td>
<thscope="row">9</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
...
@@ -1504,7 +1501,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1504,7 +1501,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>1</td>
<thscope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
...
@@ -1513,7 +1510,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1513,7 +1510,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tr>
<tr>
<tr>
<td>2</td>
<thscope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
...
@@ -1522,7 +1519,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1522,7 +1519,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tr>
<tr>
<tr>
<td>3</td>
<thscope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
...
@@ -1549,7 +1546,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1549,7 +1546,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>1</td>
<thscope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
...
@@ -1558,7 +1555,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1558,7 +1555,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tr>
<tr>
<tr>
<td>2</td>
<thscope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
...
@@ -1567,7 +1564,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1567,7 +1564,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tr>
<tr>
<tr>
<td>3</td>
<thscope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
...
@@ -1592,7 +1589,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1592,7 +1589,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<h2id="forms-example">Basic example</h2>
<h2id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. All textual <code><input></code>, <code><textarea></code>, and <code><select></code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
<p>Individual form controls automatically receive some global styling. All textual <code><input></code>, <code><textarea></code>, and <code><select></code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
@@ -1652,17 +1649,11 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1652,17 +1649,11 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
<spanclass="nt"><label</span><spanclass="na">class=</span><spanclass="s">"sr-only"</span><spanclass="na">for=</span><spanclass="s">"exampleInputAmount"</span><spanclass="nt">></span>Amount (in dollars)<spanclass="nt"></label></span>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
@@ -1792,7 +1804,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1792,7 +1804,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code><label></code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code><fieldset></code>.</p>
<p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code><label></code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code><fieldset></code>.</p>
@@ -1861,7 +1873,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1861,7 +1873,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<h4>Inline checkboxes and radios</h4>
<h4>Inline checkboxes and radios</h4>
<p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p>
<p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p>
@@ -1908,7 +1920,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1908,7 +1920,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<h4>Checkboxes and radios without label text</h4>
<h4>Checkboxes and radios without label text</h4>
<p>Should you have no text within the <code><label></code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
<p>Should you have no text within the <code><label></code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
<inputtype="checkbox"id="blankCheckbox"value="option1"aria-label="Checkbox without label text">
<inputtype="checkbox"id="blankCheckbox"value="option1"aria-label="Checkbox without label text">
...
@@ -1935,7 +1947,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1935,7 +1947,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<h3>Selects</h3>
<h3>Selects</h3>
<p>Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via <code>border-radius</code> properties.</p>
<p>Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via <code>border-radius</code> properties.</p>
@@ -1973,7 +1991,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -1973,7 +1991,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<h2id="forms-controls-static">Static control</h2>
<h2id="forms-controls-static">Static control</h2>
<p>When you need to place plain text next to a form label within a form, use the <code>.form-control-static</code> class on a <code><p></code>.</p>
<p>When you need to place plain text next to a form label within a form, use the <code>.form-control-static</code> class on a <code><p></code>.</p>
@@ -2030,7 +2048,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -2030,7 +2048,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<h2id="forms-control-focus">Focus state</h2>
<h2id="forms-control-focus">Focus state</h2>
<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>
@@ -2215,7 +2233,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -2215,7 +2233,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<p>Although the following examples already mention the validation state of their respective form controls in the <code><label></code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
<p>Although the following examples already mention the validation state of their respective form controls in the <code><label></code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
<spanclass="nt"><label</span><spanclass="na">class=</span><spanclass="s">"control-label col-sm-3"</span><spanclass="na">for=</span><spanclass="s">"inputSuccess3"</span><spanclass="nt">></span>Input with success<spanclass="nt"></label></span>
<spanclass="nt"><label</span><spanclass="na">class=</span><spanclass="s">"control-label col-sm-3"</span><spanclass="na">for=</span><spanclass="s">"inputSuccess3"</span><spanclass="nt">></span>Input with success<spanclass="nt"></label></span>
<spanclass="nt"><label</span><spanclass="na">class=</span><spanclass="s">"control-label"</span><spanclass="na">for=</span><spanclass="s">"inputSuccess4"</span><spanclass="nt">></span>Input with success<spanclass="nt"></label></span>
<spanclass="nt"><label</span><spanclass="na">class=</span><spanclass="s">"control-label"</span><spanclass="na">for=</span><spanclass="s">"inputSuccess4"</span><spanclass="nt">></span>Input with success<spanclass="nt"></label></span>
@@ -2351,7 +2369,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -2351,7 +2369,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<h3>Horizontal form group sizes</h3>
<h3>Horizontal form group sizes</h3>
<p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
<p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
@@ -2418,7 +2436,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -2418,7 +2436,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
<p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
<p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p>
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
<p>Among other things, there's <ahref="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox <30</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
</div>
<h2id="buttons-options">Options</h2>
<h2id="buttons-options">Options</h2>
<p>Use any of the available button classes to quickly create a styled button.</p>
<p>Use any of the available button classes to quickly create a styled button.</p>
@@ -2574,35 +2621,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -2574,35 +2621,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<h4>Link functionality caveat</h4>
<h4>Link functionality caveat</h4>
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
</div>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Context-specific usage</h4>
<p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p>
</div>
<h2id="buttons-tags">Button tags</h2>
<p>Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Cross-browser rendering</h4>
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
<p>Among other things, there's <ahref="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox <30</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
</div>
</div>
</div>
<divclass="bs-docs-section">
<divclass="bs-docs-section">
...
@@ -2686,9 +2705,9 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
...
@@ -2686,9 +2705,9 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
<h3id="helper-classes-close">Close icon</h3>
<h3id="helper-classes-close">Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<p>There are some caveats regarding using modals on mobile devices. <ahref="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
<p>There are some caveats regarding using modals on mobile devices. <ahref="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
</div>
<p><strongclass="text-danger">Due to how HTML5 defines its semantics, the <code>autofocus</code> HTML attribute has no effect in Bootstrap modals.</strong></p>
<p><strongclass="text-danger">Due to how HTML5 defines its semantics, the <code>autofocus</code> HTML attribute has no effect in Bootstrap modals.</strong> To achieve the same effect, use some custom JavaScript:</p>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
@@ -1631,12 +1634,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
...
@@ -1631,12 +1634,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
<p>When using a <code>.close</code> button, it must be the first child of the <code>.alert-dismissible</code> and no text content may come before it in the markup.</p>
<p>When using a <code>.close</code> button, it must be the first child of the <code>.alert-dismissible</code> and no text content may come before it in the markup.</p>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<p>
...
@@ -1651,9 +1654,8 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
...
@@ -1651,9 +1654,8 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.</p>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.</p>
<p>To have your alerts use animation when closing, make sure they have the <code>.fade</code> and <code>.in</code> classes already applied to them.</p>
<p>To have your alerts use animation when closing, make sure they have the <code>.fade</code> and <code>.in</code> classes already applied to them.</p>
...
@@ -1826,8 +1828,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
...
@@ -1826,8 +1828,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
@@ -1844,6 +1845,36 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
...
@@ -1844,6 +1845,36 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
<p>You can use a link with the <code>href</code> attribute, or a button with the <code>data-target</code> attribute. In both cases, the <code>data-toggle="collapse"</code> is required.</p>
<p>You can use a link with the <code>href</code> attribute, or a button with the <code>data-target</code> attribute. In both cases, the <code>data-toggle="collapse"</code> is required.</p>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of <code>aria-expanded="false"</code>. If you've set the collapsible element to be open by default using the <code>in</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.</p>
<p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of <code>aria-expanded="false"</code>. If you've set the collapsible element to be open by default using the <code>in</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.</p>
...
@@ -2454,6 +2478,9 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
...
@@ -2454,6 +2478,9 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
