From 44447eeefe61dbb16cab59900c3c061d9f207fbc Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Mon, 24 Nov 2014 17:09:32 -0800
Subject: Give all embedded live docs examples data-example-id attrs

Refs #11410
---
 docs/_includes/css/buttons.html | 16 ++++++-------
 docs/_includes/css/code.html    | 10 ++++----
 docs/_includes/css/forms.html   | 48 ++++++++++++++++++-------------------
 docs/_includes/css/helpers.html |  8 +++----
 docs/_includes/css/images.html  |  2 +-
 docs/_includes/css/tables.html  | 14 +++++------
 docs/_includes/css/type.html    | 52 ++++++++++++++++++++---------------------
 7 files changed, 75 insertions(+), 75 deletions(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/buttons.html b/docs/_includes/css/buttons.html
index c4aee5972..78cd56487 100644
--- a/docs/_includes/css/buttons.html
+++ b/docs/_includes/css/buttons.html
@@ -3,7 +3,7 @@
 
   <h2 id="buttons-tags">Button tags</h2>
   <p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
-  <form class="bs-example">
+  <form class="bs-example" data-example-id="btn-tags">
     <a class="btn btn-default" href="#" role="button">Link</a>
     <button class="btn btn-default" type="submit">Button</button>
     <input class="btn btn-default" type="button" value="Input">
@@ -34,7 +34,7 @@
 
   <h2 id="buttons-options">Options</h2>
   <p>Use any of the available button classes to quickly create a styled button.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="btn-variants">
     <button type="button" class="btn btn-default">Default</button>
     <button type="button" class="btn btn-primary">Primary</button>
     <button type="button" class="btn btn-success">Success</button>
@@ -73,7 +73,7 @@
 
   <h2 id="buttons-sizes">Sizes</h2>
   <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="btn-sizes">
     <p>
       <button type="button" class="btn btn-primary btn-lg">Large button</button>
       <button type="button" class="btn btn-default btn-lg">Large button</button>
@@ -111,7 +111,7 @@
 {% endhighlight %}
 
   <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="block-btns">
     <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
       <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
       <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
@@ -128,7 +128,7 @@
 
   <h3>Button element</h3>
   <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
-  <p class="bs-example">
+  <p class="bs-example" data-example-id="active-button-btns">
     <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
     <button type="button" class="btn btn-default btn-lg active">Button</button>
   </p>
@@ -139,7 +139,7 @@
 
   <h3>Anchor element</h3>
   <p>Add the <code>.active</code> class to <code>&lt;a&gt;</code> buttons.</p>
-  <p class="bs-example">
+  <p class="bs-example" data-example-id="active-anchor-btns">
     <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
     <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
   </p>
@@ -154,7 +154,7 @@
 
   <h3>Button element</h3>
   <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
-  <p class="bs-example">
+  <p class="bs-example" data-example-id="disabled-button-btns">
     <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
     <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
   </p>
@@ -170,7 +170,7 @@
 
   <h3>Anchor element</h3>
   <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
-  <p class="bs-example">
+  <p class="bs-example" data-example-id="disabled-anchor-btns">
     <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
     <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
   </p>
diff --git a/docs/_includes/css/code.html b/docs/_includes/css/code.html
index ba2edc151..02acb1238 100644
--- a/docs/_includes/css/code.html
+++ b/docs/_includes/css/code.html
@@ -3,7 +3,7 @@
 
   <h2 id="code-inline">Inline</h2>
   <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
-<div class="bs-example">
+<div class="bs-example" data-example-id="inline-code">
   For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% highlight html %}
@@ -12,7 +12,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
   <h2 id="code-user-input">User input</h2>
   <p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
-<div class="bs-example">
+<div class="bs-example" data-example-id="simple-kbd">
   To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
   To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 </div>
@@ -23,7 +23,7 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 
   <h2 id="code-block">Basic block</h2>
   <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
-<div class="bs-example">
+<div class="bs-example" data-example-id="simple-pre">
   <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
 </div>
 {% highlight html %}
@@ -33,7 +33,7 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
   <p>You may optionally add the <code>.pre-scrollable</code> class, which will set a max-height of 350px and provide a y-axis scrollbar.</p>
   <h2 id="code-variables">Variables</h2>
   <p>For indicating variables use the <code>&lt;var&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-var">
     <p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
 
   </div>
@@ -43,7 +43,7 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 
   <h2 id="code-sample-output">Sample output</h2>
   <p>For indicating blocks sample output from a program use the <code>&lt;samp&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-samp">
     <p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>
   </div>
 {% highlight html %}
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index a2e096937..3ab202f7c 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -3,7 +3,7 @@
 
   <h2 id="forms-example">Basic example</h2>
   <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</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>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="basic-forms">
     <form>
       <div class="form-group">
         <label for="exampleInputEmail1">Email address</label>
@@ -65,7 +65,7 @@
     <h4>Always add labels</h4>
     <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>
   </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-form-inline">
     <form class="form-inline">
       <div class="form-group">
         <label class="sr-only" for="exampleInputEmail2">Email address</label>
@@ -102,7 +102,7 @@
 </form>
 {% endhighlight %}
 
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-inline-with-input-group">
     <form class="form-inline">
       <div class="form-group">
         <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
@@ -131,7 +131,7 @@
 
   <h2 id="forms-horizontal">Horizontal form</h2>
   <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>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-horizontal-form">
     <form class="form-horizontal">
       <div class="form-group">
         <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
@@ -202,7 +202,7 @@
     <h4>Type declaration required</h4>
     <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
   </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="text-form-control">
     <form>
       <input type="text" class="form-control" placeholder="Text input">
     </form>
@@ -217,7 +217,7 @@
 
   <h3>Textarea</h3>
   <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="textarea-form-control">
     <form>
       <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
     </form>
@@ -230,7 +230,7 @@
   <p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
   <p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code>&lt;label&gt;</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>&lt;fieldset&gt;</code>.</p>
   <h4>Default (stacked)</h4>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="block-checkboxes-radios">
     <form>
       <div class="checkbox">
         <label>
@@ -301,7 +301,7 @@
 
   <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>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="inline-checkboxes-radios">
     <form>
       <label class="checkbox-inline">
         <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -350,7 +350,7 @@
 
   <h4>Checkboxes and radios without label text</h4>
   <p>Should you have no text within the <code>&lt;label&gt;</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>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="checkboxes-radios-without-labels">
     <form>
       <div class="checkbox">
         <label>
@@ -379,7 +379,7 @@
 
   <h3>Selects</h3>
   <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-ids="select-form-control">
     <form>
       <select class="form-control">
         <option>1</option>
@@ -419,7 +419,7 @@
 
   <h2 id="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>&lt;p&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="horizontal-static-form-control">
     <form class="form-horizontal">
       <div class="form-group">
         <label class="col-sm-2 control-label">Email</label>
@@ -451,7 +451,7 @@
   </div>
 </form>
 {% endhighlight %}
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="inline-static-form-control">
     <form class="form-inline">
       <div class="form-group">
         <label class="sr-only">Email</label>
@@ -493,7 +493,7 @@
 
   <h2 id="forms-control-disabled">Disabled state</h2>
   <p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="text-form-control-disabled">
     <form>
       <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
     </form>
@@ -515,7 +515,7 @@
     <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
   </div>
 
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="disabled-fieldset">
     <form>
       <fieldset disabled>
         <div class="form-group">
@@ -563,7 +563,7 @@
 
   <h2 id="forms-control-readonly">Readonly state</h2>
   <p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="readonly-text-form-control">
     <form>
       <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
     </form>
@@ -582,7 +582,7 @@
     <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code>&lt;label&gt;</code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control.</p>
   </div>
 
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-validation-states">
     <form>
       <div class="form-group has-success">
         <label class="control-label" for="inputSuccess1">Input with success</label>
@@ -673,7 +673,7 @@
     <p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>.sr-only</code> class and explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code>&lt;label&gt;</code> associated with the form control.</p>
     <p>Although the following examples already mention the validation state of their respective form controls in the <code>&lt;label&gt;</code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
   </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-validation-states-with-icons">
     <form>
       <div class="form-group has-success has-feedback">
         <label class="control-label" for="inputSuccess2">Input with success</label>
@@ -717,7 +717,7 @@
 {% endhighlight %}
 
   <h4>Optional icons in horizontal and inline forms</h4>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="horizontal-form-validation-state-with-icon">
     <form class="form-horizontal">
       <div class="form-group has-success has-feedback">
         <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
@@ -742,7 +742,7 @@
 </form>
 {% endhighlight %}
 
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="inline-form-validation-state-with-icon">
     <form class="form-inline">
       <div class="form-group has-success has-feedback">
         <label class="control-label" for="inputSuccess4">Input with success</label>
@@ -765,7 +765,7 @@
 
   <h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
   <p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-validation-state-with-icon-without-label">
     <div class="form-group has-success has-feedback">
       <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
       <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
@@ -788,7 +788,7 @@
 
   <h3>Height sizing</h3>
   <p>Create taller or shorter form controls that match button sizes.</p>
-  <div class="bs-example bs-example-control-sizing">
+  <div class="bs-example bs-example-control-sizing" data-example-id="form-control-height-sizes">
     <form>
       <div class="controls">
         <input class="form-control input-lg" type="text" placeholder=".input-lg">
@@ -819,7 +819,7 @@
 
   <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>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-group-height-sizes">
     <form class="form-horizontal">
       <div class="form-group form-group-lg">
         <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
@@ -855,7 +855,7 @@
 
   <h3>Column sizing</h3>
   <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="form-control-column-sizing">
     <form>
       <div class="row">
         <div class="col-xs-2">
@@ -890,7 +890,7 @@
     <h4>Associating help text with form controls</h4>
     <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>
   </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-help-text">
     <form>
       <div class="form-group">
         <label for="inputHelpBlock">Input with help text</label>
diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html
index 0068b159e..c6701bfdc 100644
--- a/docs/_includes/css/helpers.html
+++ b/docs/_includes/css/helpers.html
@@ -3,7 +3,7 @@
 
   <h3 id="helper-classes-colors">Contextual colors</h3>
   <p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="contextual-colors-helpers">
     <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
     <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
@@ -30,7 +30,7 @@
 
   <h3 id="helper-classes-backgrounds">Contextual backgrounds</h3>
   <p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
-  <div class="bs-example bs-example-bg-classes">
+  <div class="bs-example bs-example-bg-classes" data-example-id="contextual-backgrounds-helpers">
     <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
     <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
@@ -55,7 +55,7 @@
 
   <h3 id="helper-classes-close">Close icon</h3>
   <p>Use the generic close icon for dismissing content like modals and alerts.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="close-icon">
     <p><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></p>
   </div>
 {% highlight html %}
@@ -65,7 +65,7 @@
 
   <h3 id="helper-classes-carets">Carets</h3>
   <p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="../components/#btn-dropdowns-dropup">dropup menus</a>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="caret">
     <span class="caret"></span>
   </div>
 {% highlight html %}
diff --git a/docs/_includes/css/images.html b/docs/_includes/css/images.html
index 711608912..73516afba 100644
--- a/docs/_includes/css/images.html
+++ b/docs/_includes/css/images.html
@@ -17,7 +17,7 @@
     <h4>Cross-browser compatibility</h4>
     <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
   </div>
-  <div class="bs-example bs-example-images">
+  <div class="bs-example bs-example-images" data-example-id="image-shapes">
     <img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
     <img data-src="holder.js/140x140" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
     <img data-src="holder.js/140x140" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
diff --git a/docs/_includes/css/tables.html b/docs/_includes/css/tables.html
index aba4a3af8..0b2e1b5fd 100644
--- a/docs/_includes/css/tables.html
+++ b/docs/_includes/css/tables.html
@@ -3,7 +3,7 @@
 
   <h2 id="tables-example">Basic example</h2>
   <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-table">
     <table class="table">
       <caption>Optional table caption.</caption>
       <thead>
@@ -49,7 +49,7 @@
     <h4>Cross-browser compatibility</h4>
     <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
   </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="striped-table">
     <table class="table table-striped">
       <thead>
         <tr>
@@ -90,7 +90,7 @@
 
   <h2 id="tables-bordered">Bordered table</h2>
   <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="bordered-table">
     <table class="table table-bordered">
       <thead>
         <tr>
@@ -135,7 +135,7 @@
 
   <h2 id="tables-hover-rows">Hover rows</h2>
   <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="hoverable-table">
     <table class="table table-hover">
       <thead>
         <tr>
@@ -175,7 +175,7 @@
 
   <h2 id="tables-condensed">Condensed table</h2>
   <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="condensed-table">
     <table class="table table-condensed">
       <thead>
         <tr>
@@ -261,7 +261,7 @@
       </tbody>
     </table>
   </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="contextual-table">
     <table class="table">
       <thead>
         <tr>
@@ -365,7 +365,7 @@
     <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
   </div>
 
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-responsive-table">
     <div class="table-responsive">
       <table class="table">
         <thead>
diff --git a/docs/_includes/css/type.html b/docs/_includes/css/type.html
index d0c1daeef..18cd96464 100644
--- a/docs/_includes/css/type.html
+++ b/docs/_includes/css/type.html
@@ -4,7 +4,7 @@
   <!-- Headings -->
   <h2 id="type-headings">Headings</h2>
   <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>
-  <div class="bs-example bs-example-type">
+  <div class="bs-example bs-example-type" data-example-id="simple-headings">
     <table class="table">
       <tbody>
         <tr>
@@ -44,7 +44,7 @@
 {% endhighlight %}
 
   <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code> class.</p>
-  <div class="bs-example bs-example-type">
+  <div class="bs-example bs-example-type" data-example-id="small-headings">
     <table class="table">
       <tbody>
         <tr>
@@ -81,7 +81,7 @@
   <!-- Body copy -->
   <h2 id="type-body-copy">Body copy</h2>
   <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="body-copy">
     <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
     <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
     <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
@@ -93,7 +93,7 @@
   <!-- Body copy .lead -->
   <h3>Lead body copy</h3>
   <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="lead-copy">
     <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
   </div>
 {% highlight html %}
@@ -108,7 +108,7 @@
   <h2 id="type-inline-text">Inline text elements</h2>
   <h3>Marked text</h3>
   <p>For highlighting a run of text due to its relevance in another context, use the <code>&lt;mark&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-mark">
     <p>You can use the mark tag to <mark>highlight</mark> text.</p>
   </div>
 {% highlight html %}
@@ -118,7 +118,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Deleted text</h3>
   <p>For indicating blocks of text that have been deleted use the <code>&lt;del&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-del">
     <p><del>This line of text is meant to be treated as deleted text.</del></p>
   </div>
 {% highlight html %}
@@ -127,7 +127,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Strikethrough text</h3>
   <p>For indicating blocks of text that are no longer relevant use the <code>&lt;s&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-s">
     <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
   </div>
 {% highlight html %}
@@ -136,7 +136,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Inserted text</h3>
   <p>For indicating additions to the document use the <code>&lt;ins&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-ins">
     <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
   </div>
 {% highlight html %}
@@ -145,7 +145,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Underlined text</h3>
   <p>To underline text use the <code>&lt;u&gt;</code> tag.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-u">
     <p><u>This line of text will render as underlined</u></p>
   </div>
 {% highlight html %}
@@ -157,7 +157,7 @@ You can use the mark tag to <mark>highlight</mark> text.
   <h3>Small text</h3>
   <p>For de-emphasizing inline or blocks of text, use the <code>&lt;small&gt;</code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&gt;</code> elements.</p>
   <p>You may alternatively use an inline element with <code>.small</code> in place of any <code>&lt;small&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-small">
     <p><small>This line of text is meant to be treated as fine print.</small></p>
   </div>
 {% highlight html %}
@@ -167,7 +167,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Bold</h3>
   <p>For emphasizing a snippet of text with a heavier font-weight.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-strong">
     <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
   </div>
 {% highlight html %}
@@ -176,7 +176,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Italics</h3>
   <p>For emphasizing a snippet of text with italics.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-em">
     <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
   </div>
 {% highlight html %}
@@ -190,7 +190,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h2 id="type-alignment">Alignment classes</h2>
   <p>Easily realign text to components with text alignment classes.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="text-alignment">
     <p class="text-left">Left aligned text.</p>
     <p class="text-center">Center aligned text.</p>
     <p class="text-right">Right aligned text.</p>
@@ -207,7 +207,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h2 id="type-transformation">Transformation classes</h2>
   <p>Transform text in components with text capitalization classes.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="text-capitalization">
     <p class="text-lowercase">Lowercased text.</p>
     <p class="text-uppercase">Uppercased text.</p>
     <p class="text-capitalize">Capitalized text.</p>
@@ -224,7 +224,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Basic abbreviation</h3>
   <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-abbr">
     <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
   </div>
 {% highlight html %}
@@ -233,7 +233,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Initialism</h3>
   <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-initialism">
     <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
   </div>
 {% highlight html %}
@@ -244,7 +244,7 @@ You can use the mark tag to <mark>highlight</mark> text.
   <!-- Addresses -->
   <h2 id="type-addresses">Addresses</h2>
   <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-address">
     <address>
       <strong>Twitter, Inc.</strong><br>
       795 Folsom Ave, Suite 600<br>
@@ -277,7 +277,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Default blockquote</h3>
   <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code>&lt;p&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-blockquote">
     <blockquote>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
     </blockquote>
@@ -293,7 +293,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h4>Naming a source</h4>
   <p>Add a <code>&lt;footer&gt;</code> for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="blockquote-cite">
     <blockquote>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@@ -308,7 +308,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h4>Alternate displays</h4>
   <p>Add <code>.blockquote-reverse</code> for a blockquote with right-aligned content.</p>
-  <div class="bs-example" style="overflow: hidden;">
+  <div class="bs-example" style="overflow: hidden;" data-example-id="blockquote-reverse">
     <blockquote class="blockquote-reverse">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
@@ -326,7 +326,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Unordered</h3>
   <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-ul">
     <ul>
       <li>Lorem ipsum dolor sit amet</li>
       <li>Consectetur adipiscing elit</li>
@@ -353,7 +353,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Ordered</h3>
   <p>A list of items in which the order <em>does</em> explicitly matter.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-ol">
     <ol>
       <li>Lorem ipsum dolor sit amet</li>
       <li>Consectetur adipiscing elit</li>
@@ -373,7 +373,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Unstyled</h3>
   <p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="unstyled-list">
     <ul class="list-unstyled">
       <li>Lorem ipsum dolor sit amet</li>
       <li>Consectetur adipiscing elit</li>
@@ -400,7 +400,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Inline</h3>
   <p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="list-inline">
     <ul class="list-inline">
       <li>Lorem ipsum</li>
       <li>Phasellus iaculis</li>
@@ -415,7 +415,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h3>Description</h3>
   <p>A list of terms with their associated descriptions.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="simple-dl">
     <dl>
       <dt>Description lists</dt>
       <dd>A description list is perfect for defining terms.</dd>
@@ -435,7 +435,7 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <h4>Horizontal description</h4>
   <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side. Starts off stacked like default <code>&lt;dl&gt;</code>s, but when the navbar expands, so do these.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="horizontal-dl">
     <dl class="dl-horizontal">
       <dt>Description lists</dt>
       <dd>A description list is perfect for defining terms.</dd>
-- 
cgit v1.2.3


From 08f388679b7e77104d3129733feffb956b10dcf0 Mon Sep 17 00:00:00 2001
From: Chris Rebert <github@rebertia.com>
Date: Sat, 6 Dec 2014 13:55:31 -0800
Subject: tweak grid docs copy

[skip sauce]
---
 docs/_includes/css/grid.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html
index 3563aa78a..1136355ff 100644
--- a/docs/_includes/css/grid.html
+++ b/docs/_includes/css/grid.html
@@ -14,7 +14,7 @@
     <li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li>
     <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
     <li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</li>
-    <li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li>
+    <li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any <code>.col-md-*</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-*</code> class is not present.</li>
   </ul>
   <p>Look to the examples for applying these principles to your code.</p>
 
-- 
cgit v1.2.3


From c609272ac199cc9806ad6c4cf8c7f8f4253fb347 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 7 Dec 2014 14:29:03 +0000
Subject: ``aria-label="close"`` instead of sr-only ``span``

shorter, neater, well supported
---
 docs/_includes/css/helpers.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html
index c6701bfdc..db60f0ad8 100644
--- a/docs/_includes/css/helpers.html
+++ b/docs/_includes/css/helpers.html
@@ -56,10 +56,10 @@
   <h3 id="helper-classes-close">Close icon</h3>
   <p>Use the generic close icon for dismissing content like modals and alerts.</p>
   <div class="bs-example" data-example-id="close-icon">
-    <p><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></p>
+    <p><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></p>
   </div>
 {% highlight html %}
-<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 {% endhighlight %}
 
 
-- 
cgit v1.2.3


From 202f1f8d69b119fd63d6788ee98e40321f53423b Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 7 Dec 2014 15:17:49 +0000
Subject: ``<abbr>`` with title also useful for AT

...and remove the redundant paragraph for basic abbreviation, which
simply repeats what was just said above.
---
 docs/_includes/css/type.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/type.html b/docs/_includes/css/type.html
index 18cd96464..294a1df29 100644
--- a/docs/_includes/css/type.html
+++ b/docs/_includes/css/type.html
@@ -220,10 +220,9 @@ You can use the mark tag to <mark>highlight</mark> text.
 
   <!-- Abbreviations -->
   <h2 id="type-abbreviations">Abbreviations</h2>
-  <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
+  <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.</p>
 
   <h3>Basic abbreviation</h3>
-  <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
   <div class="bs-example" data-example-id="simple-abbr">
     <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
   </div>
-- 
cgit v1.2.3


From 52e4b87b5a2ac6543f9a901946bea84966681216 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 8 Dec 2014 10:36:26 +0000
Subject: Expand advice for optional icons with hidden labels

to clarify/hint that a ``<label class="sr-only">`` is not the only way
to do it
---
 docs/_includes/css/forms.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 3ab202f7c..d88498f8e 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -764,7 +764,7 @@
 {% endhighlight %}
 
   <h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
-  <p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p>
+  <p>If you use the <code>.sr-only</code> class to hide a form control's <code>&lt;label&gt;</code> (rather than using other labelling options, such as the <code>aria-label</code> attribute), Bootstrap will automatically adjust the position of the icon once it's been added.</p>
   <div class="bs-example" data-example-id="form-validation-state-with-icon-without-label">
     <div class="form-group has-success has-feedback">
       <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
-- 
cgit v1.2.3


From c918127e68ac320830f960ac8ab804378588db5b Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 8 Dec 2014 12:05:42 +0000
Subject: Split out/clarify ``<select>`` and ``multiple``

---
 docs/_includes/css/forms.html | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index d88498f8e..031dcd879 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -378,7 +378,6 @@
 {% endhighlight %}
 
   <h3>Selects</h3>
-  <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
   <div class="bs-example" data-example-ids="select-form-control">
     <form>
       <select class="form-control">
@@ -388,14 +387,6 @@
         <option>4</option>
         <option>5</option>
       </select>
-      <br>
-      <select multiple class="form-control">
-        <option>1</option>
-        <option>2</option>
-        <option>3</option>
-        <option>4</option>
-        <option>5</option>
-      </select>
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
@@ -406,7 +397,23 @@
   <option>4</option>
   <option>5</option>
 </select>
+{% endhighlight %}
+
+  <p>For <code>&lt;select&gt;</code> controls with the <code>multiple</code> attribute, multiple options are shown by default.</p>
+
+  <div class="bs-example" data-example-ids="select-multiple-form-control">
+    <form>
+      <select multiple class="form-control">
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+      </select>
+    </form>
+  </div><!-- /.bs-example -->
 
+{% highlight html %}
 <select multiple class="form-control">
   <option>1</option>
   <option>2</option>
-- 
cgit v1.2.3


From bc36e312800e72f1f76515fac8977602b66f012a Mon Sep 17 00:00:00 2001
From: Bastien <bmoulia@gmail.com>
Date: Fri, 12 Dec 2014 11:07:16 +0100
Subject: Add new brand-primary color in the doc and the true color in comment

---
 docs/_includes/css/less.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/less.html b/docs/_includes/css/less.html
index 71cae072c..a75028651 100644
--- a/docs/_includes/css/less.html
+++ b/docs/_includes/css/less.html
@@ -42,7 +42,7 @@
     </div>
   </div>
 {% highlight scss %}
-@brand-primary: #428bca;
+@brand-primary: darken(#428bca, 6.5%); // #337ab7
 @brand-success: #5cb85c;
 @brand-info:    #5bc0de;
 @brand-warning: #f0ad4e;
-- 
cgit v1.2.3


From 4945e370f057ef491b0197034ddedd969913b06c Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 14 Dec 2014 16:59:47 -0800
Subject: fixes #15340: mention in docs that most selects can't change
 border-radius

---
 docs/_includes/css/forms.html | 1 +
 1 file changed, 1 insertion(+)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 031dcd879..054922703 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -378,6 +378,7 @@
 {% endhighlight %}
 
   <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>
   <div class="bs-example" data-example-ids="select-form-control">
     <form>
       <select class="form-control">
-- 
cgit v1.2.3


From 511f37dc049e99256838894b311b8847dba2c1c5 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Tue, 30 Dec 2014 18:16:16 -0800
Subject: Document that responsive tables use `overflow-y: hidden`

Closes #15288

[skip sauce]
---
 docs/_includes/css/tables.html | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/tables.html b/docs/_includes/css/tables.html
index c3021ee80..ac84e8158 100644
--- a/docs/_includes/css/tables.html
+++ b/docs/_includes/css/tables.html
@@ -351,6 +351,10 @@
   <h2 id="tables-responsive">Responsive tables</h2>
   <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
 
+  <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-overflow">
+    <h4>Vertical clipping/truncation</h4>
+    <p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
+  </div>
   <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-ff-fieldset">
     <h4>Firefox and fieldsets</h4>
     <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
-- 
cgit v1.2.3


From be6dc3a3c9ac75e9f0a730348dd960922d7aea46 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Mon, 5 Jan 2015 16:19:56 -0800
Subject: Add example of using feedback icons with .input-group ; fixes #15332

---
 docs/_includes/css/forms.html | 81 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 054922703..d3b882672 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -701,6 +701,15 @@
         <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
         <span id="inputError2Status" class="sr-only">(error)</span>
       </div>
+      <div class="form-group has-success has-feedback">
+        <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
+        <div class="input-group">
+          <span class="input-group-addon">@</span>
+          <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
+        </div>
+        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+        <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
+      </div>
     </form>
   </div>
 {% highlight html %}
@@ -722,6 +731,15 @@
   <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
   <span id="inputError2Status" class="sr-only">(error)</span>
 </div>
+<div class="form-group has-success has-feedback">
+  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
+  <div class="input-group">
+    <span class="input-group-addon">@</span>
+    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
+  </div>
+  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
+</div>
 {% endhighlight %}
 
   <h4>Optional icons in horizontal and inline forms</h4>
@@ -735,6 +753,17 @@
           <span id="inputSuccess3Status" class="sr-only">(success)</span>
         </div>
       </div>
+      <div class="form-group has-success has-feedback">
+        <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
+        <div class="col-sm-9">
+          <div class="input-group">
+            <span class="input-group-addon">@</span>
+            <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
+          </div>
+          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+          <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
+        </div>
+      </div>
     </form>
   </div>
 {% highlight html %}
@@ -747,6 +776,17 @@
       <span id="inputSuccess3Status" class="sr-only">(success)</span>
     </div>
   </div>
+  <div class="form-group has-success has-feedback">
+    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
+    <div class="col-sm-9">
+      <div class="input-group">
+        <span class="input-group-addon">@</span>
+        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
+      </div>
+      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
+    </div>
+  </div>
 </form>
 {% endhighlight %}
 
@@ -759,6 +799,18 @@
         <span id="inputSuccess4Status" class="sr-only">(success)</span>
       </div>
     </form>
+    <br>
+    <form class="form-inline">
+      <div class="form-group has-success has-feedback">
+        <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
+        <div class="input-group">
+          <span class="input-group-addon">@</span>
+          <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
+        </div>
+        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+        <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
+      </div>
+    </form>
   </div>
 {% highlight html %}
 <form class="form-inline">
@@ -769,6 +821,17 @@
     <span id="inputSuccess4Status" class="sr-only">(success)</span>
   </div>
 </form>
+<form class="form-inline">
+  <div class="form-group has-success has-feedback">
+    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
+    <div class="input-group">
+      <span class="input-group-addon">@</span>
+      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
+    </div>
+    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
+  </div>
+</form>
 {% endhighlight %}
 
   <h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
@@ -780,6 +843,15 @@
       <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
       <span id="inputSuccess5Status" class="sr-only">(success)</span>
     </div>
+    <div class="form-group has-success has-feedback">
+      <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
+      <div class="input-group">
+        <span class="input-group-addon">@</span>
+        <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
+      </div>
+      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+      <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
+    </div>
   </div>
 {% highlight html %}
 <div class="form-group has-success has-feedback">
@@ -788,6 +860,15 @@
   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
   <span id="inputSuccess5Status" class="sr-only">(success)</span>
 </div>
+<div class="form-group has-success has-feedback">
+  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
+  <div class="input-group">
+    <span class="input-group-addon">@</span>
+    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
+  </div>
+  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
+</div>
 {% endhighlight %}
 
 
-- 
cgit v1.2.3


From 7b847052863c1fa26e6a9175b2decd778a640f9a Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Tue, 13 Jan 2015 17:33:27 -0800
Subject: Document that .form-inline & .form-horizontal work fine on
 non-<form>s too

Fixes #15555
[skip sauce]
---
 docs/_includes/css/forms.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 054922703..b4d01a25d 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -56,7 +56,7 @@
 
 
   <h2 id="forms-inline">Inline form</h2>
-  <p>Add <code>.form-inline</code> to your <code>&lt;form&gt;</code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
+  <p>Add <code>.form-inline</code> to your form (which doesn't have to be a <code>&lt;form&gt;</code>) for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
   <div class="bs-callout bs-callout-danger" id="callout-inline-form-width">
     <h4>Requires custom widths</h4>
     <p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
@@ -130,7 +130,7 @@
 {% endhighlight %}
 
   <h2 id="forms-horizontal">Horizontal form</h2>
-  <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 (which doesn't have to be a <code>&lt;form&gt;</code>). Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
   <div class="bs-example" data-example-id="simple-horizontal-form">
     <form class="form-horizontal">
       <div class="form-group">
-- 
cgit v1.2.3


From 2fa70f37da8b250db1fc0a6d8dc4d5aba61bf0df Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Thu, 15 Jan 2015 17:44:38 -0800
Subject: Add example of using .form-inline with visible <label>s

Refs #15410
[skip sauce]
---
 docs/_includes/css/forms.html | 44 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 8 deletions(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index b50e31380..7c8b124dc 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -65,15 +65,43 @@
     <h4>Always add labels</h4>
     <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>
   </div>
+
+  <div class="bs-example" data-example-id="simple-form-inline">
+    <form class="form-inline">
+      <div class="form-group">
+        <label for="exampleInputName2">Name</label>
+        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputEmail2">Email</label>
+        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
+      </div>
+      <button type="submit" class="btn btn-default">Send invitation</button>
+    </form>
+  </div><!-- /example -->
+{% highlight html %}
+<form class="form-inline">
+  <div class="form-group">
+    <label for="exampleInputName2">Name</label>
+    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
+  </div>
+  <div class="form-group">
+    <label for="exampleInputEmail2">Email</label>
+    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
+  </div>
+  <button type="submit" class="btn btn-default">Send invitation</button>
+</form>
+{% endhighlight %}
+
   <div class="bs-example" data-example-id="simple-form-inline">
     <form class="form-inline">
       <div class="form-group">
-        <label class="sr-only" for="exampleInputEmail2">Email address</label>
-        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+        <label class="sr-only" for="exampleInputEmail3">Email address</label>
+        <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
       </div>
       <div class="form-group">
-        <label class="sr-only" for="exampleInputPassword2">Password</label>
-        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
+        <label class="sr-only" for="exampleInputPassword3">Password</label>
+        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
       </div>
       <div class="checkbox">
         <label>
@@ -86,12 +114,12 @@
 {% highlight html %}
 <form class="form-inline">
   <div class="form-group">
-    <label class="sr-only" for="exampleInputEmail2">Email address</label>
-    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+    <label class="sr-only" for="exampleInputEmail3">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
   </div>
   <div class="form-group">
-    <label class="sr-only" for="exampleInputPassword2">Password</label>
-    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
+    <label class="sr-only" for="exampleInputPassword3">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
   </div>
   <div class="checkbox">
     <label>
-- 
cgit v1.2.3


From ca2c1e1576c48f21d6f2cd8fb4e22dffb31d8bce Mon Sep 17 00:00:00 2001
From: Chris Rebert <github@rebertia.com>
Date: Thu, 15 Jan 2015 17:52:02 -0800
Subject: custom widths not always required for inline form fields

[skip sauce]
---
 docs/_includes/css/forms.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index b50e31380..184350114 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -58,7 +58,7 @@
   <h2 id="forms-inline">Inline form</h2>
   <p>Add <code>.form-inline</code> to your form (which doesn't have to be a <code>&lt;form&gt;</code>) for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
   <div class="bs-callout bs-callout-danger" id="callout-inline-form-width">
-    <h4>Requires custom widths</h4>
+    <h4>May require custom widths</h4>
     <p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
   </div>
   <div class="bs-callout bs-callout-warning" id="callout-inline-form-labels">
-- 
cgit v1.2.3


From 21f7254e102bdffe84131db03a1a037ccd4c5013 Mon Sep 17 00:00:00 2001
From: Dan Course <hello@dancourse.co.uk>
Date: Fri, 16 Jan 2015 10:36:46 +0000
Subject: 12 items of *fewer* as it's a countable item

http://www.oxforddictionaries.com/words/less-or-fewer
---
 docs/_includes/css/grid.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/_includes/css')

diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html
index 1136355ff..a6a4eaacb 100644
--- a/docs/_includes/css/grid.html
+++ b/docs/_includes/css/grid.html
@@ -347,7 +347,7 @@
 
 
   <h3 id="grid-nesting">Nesting columns</h3>
-  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p>
+  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p>
   <div class="row show-grid">
     <div class="col-sm-9">
       Level 1: .col-sm-9
-- 
cgit v1.2.3