Merge remote-tracking branch 'remotes/origin/v3.4.0-dev' into master-xmr-merged

5 files changed, 43 insertions, 12 deletions

diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index fab5ea102..7aac785b8 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -240,7 +240,7 @@
 {% endhighlight %}
   <div class="bs-callout bs-callout-info" id="callout-xref-input-group">
     <h4>Input groups</h4>
-    <p>To add integrated text or buttons before and/or after any text-based <code>&lt;input&gt;</code>, <a href="../components/#input-groups">check out the input group component</a>.</p>
+    <p>To add integrated text or buttons before and/or after any text-based <code>&lt;input&gt;</code>, <a href="{{ site.baseurl }}/components/#input-groups">check out the input group component</a>.</p>
   </div>
 
   <h3>Textarea</h3>
@@ -625,7 +625,7 @@
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
-<label class="sr-only" for="inputHelpBlock">Input with help text</label>
+<label for="inputHelpBlock">Input with help text</label>
 <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
 ...
 <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
@@ -639,7 +639,7 @@
   <div class="bs-callout bs-callout-warning" id="callout-form-validation-state-accessibility">
     <h4>Conveying validation state to assistive technologies and colorblind users</h4>
     <p>Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.</p>
-    <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), include a <a href="../components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="../components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.</p>
+    <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), include a <a href="{{ site.baseurl }}/components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="{{ site.baseurl }}/components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.</p>
   </div>
 
   <div class="bs-example" data-example-id="form-validation-states">
@@ -728,7 +728,7 @@
   <p><strong class="text-danger">Feedback icons only work with textual <code>&lt;input class="form-control"&gt;</code> elements.</strong></p>
   <div class="bs-callout bs-callout-warning" id="callout-has-feedback-icon-positioning">
     <h4>Icons, labels, and input groups</h4>
-    <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
+    <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="{{ site.baseurl }}/components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
   </div>
   <div class="bs-callout bs-callout-warning" id="callout-has-feedback-icon-accessibility">
     <h4>Conveying the icon's meaning to assistive technologies</h4>
@@ -1026,4 +1026,3 @@
   </div>
 </div>
 {% endhighlight %}
-
diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html
index 46ed46627..c226ed73c 100644
--- a/docs/_includes/css/grid.html
+++ b/docs/_includes/css/grid.html
@@ -292,7 +292,7 @@
   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 </div>
 {% endhighlight %}
-  <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <a href="../examples/grid/">the grid example</a>.</p>
+  <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <a href="{{ site.baseurl }}/examples/grid/">the grid example</a>.</p>
 {% highlight html %}
 <div class="row">
   <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
@@ -306,6 +306,38 @@
 {% endhighlight %}
 
 
+  <h2 id="grid-remove-gutters">Remove gutters</h2>
+  <p>Remove the gutters from a row and it's columns with the <code>.row-no-gutters</code> class.</p>
+  <div class="row row-no-gutters show-grid">
+    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  </div>
+  <div class="row row-no-gutters show-grid">
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  </div>
+  <div class="row row-no-gutters show-grid">
+    <div class="col-xs-6">.col-xs-6</div>
+    <div class="col-xs-6">.col-xs-6</div>
+  </div>
+{% highlight html %}
+<div class="row row-no-gutters">
+  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+<div class="row row-no-gutters">
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+<div class="row row-no-gutters">
+  <div class="col-xs-6">.col-xs-6</div>
+  <div class="col-xs-6">.col-xs-6</div>
+</div>
+{% endhighlight %}
+
+
   <h2 id="grid-offsetting">Offsetting columns</h2>
   <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
   <div class="row show-grid">
diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html
index 2da68dffa..969872776 100644
--- a/docs/_includes/css/helpers.html
+++ b/docs/_includes/css/helpers.html
@@ -64,7 +64,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>
+  <p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="{{ site.baseurl }}/components/#btn-dropdowns-dropup">dropup menus</a>.</p>
   <div class="bs-example" data-example-id="caret">
     <span class="caret"></span>
   </div>
@@ -99,7 +99,7 @@
 
   <div class="bs-callout bs-callout-warning" id="callout-helper-pull-navbar">
     <h4>Not for use in navbars</h4>
-    <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
+    <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="{{ site.baseurl }}/components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
   </div>
 
 
@@ -180,7 +180,7 @@
 
 
   <h3 id="helper-classes-screen-readers">Screen reader and keyboard navigation content</h3>
-  <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
+  <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <a href="{{ site.baseurl }}/getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
 {% highlight html %}
 <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
 {% endhighlight %}
diff --git a/docs/_includes/css/images.html b/docs/_includes/css/images.html
index a79a4d920..08aedb874 100644
--- a/docs/_includes/css/images.html
+++ b/docs/_includes/css/images.html
@@ -3,7 +3,7 @@
 
   <h2 id="images-responsive">Responsive images</h2>
   <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code>, <code>height: auto;</code> and <code>display: block;</code> to the image so that it scales nicely to the parent element.</p>
-  <p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <a href="../css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
+  <p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <a href="{{ site.baseurl }}/css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
   <div class="bs-callout bs-callout-warning" id="callout-images-ie-svg">
     <h4>SVG images and IE 8-10</h4>
     <p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
diff --git a/docs/_includes/css/less.html b/docs/_includes/css/less.html
index 6dc3ae596..85787303b 100644
--- a/docs/_includes/css/less.html
+++ b/docs/_includes/css/less.html
@@ -7,11 +7,11 @@
 
 
   <h2 id="less-bootstrap">Compiling Bootstrap</h2>
-  <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="../getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
+  <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="{{ site.baseurl }}/getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
   <p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
 
   <h2 id="less-variables">Variables</h2>
-  <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="../customize/#less-variables-section">the Customizer</a>.</p>
+  <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ site.baseurl }}/customize/#less-variables-section">the Customizer</a>.</p>
 
   <h3 id="less-variables-colors">Colors</h3>
   <p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>