Merge remote-tracking branch 'refs/remotes/twbs/v4-dev' into v4-dev

_includes/ads.html

-<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
+<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>

_includes/callout-danger-async-methods.md

 {% callout danger %}
 #### Asynchronous methods and transitions
 
-All API methods are **asynchronous** and start a **transition**. They returns to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
+All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
 
-[See our Javascript documentation for more informations.]({{ site.baseurl }}/getting-started/javascript/)
+[See our JavaScript documentation for more information.]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/)
 {% endcallout %}

_includes/callout-warning-color-assistive-technologies.md

@@ -2,4 +2,4 @@
 #### Conveying meaning to assistive technologies
 
 Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
-{% endcallout %}
+{% endcallout %}
\ No newline at end of file

_includes/docs-navbar.html

@@ -36,8 +36,8 @@
       </a>
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
         <a class="dropdown-item active" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/">Latest (4.x)</a>
-        <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com">v4 Alpha 6</a>
-        <a class="dropdown-item" href="https://getbootstrap.com/3.3.7/">v3.3.7</a>
+        <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/3.3/">v3.3.7</a>
         <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
       </div>
     </li>

_includes/docs-sidebar.html

 <form class="bd-search d-flex align-items-center">
   <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
-  <button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
+  <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
     {% include icons/menu.svg class="" width="30" height="30" %}
   </button>
 </form>
 
 <nav class="collapse bd-links" id="bd-docs-nav">
-  {% assign page_slug = page.url | split: '/' | last %}
-  {% for group in site.data.nav %}
-  {% assign link = group.pages | first %}
-  {% assign link_slug = link.title | slugify %}
-  {% assign group_slug = group.title | slugify %}
-  {% assign active = nil %}
+  {%- assign page_slug = page.url | split: '/' | last -%}
+  {%- for group in site.data.nav -%}
+  {%- assign link = group.pages | first -%}
+  {%- assign link_slug = link.title | slugify -%}
+  {%- assign group_slug = group.title | slugify -%}
+  {%- assign active = nil -%}
 
-  {% if page.group == group_slug %}
-    {% assign active = 'active' %}
-  {% endif %}
+  {%- if page.group == group_slug -%}
+    {%- assign active = 'active' -%}
+  {%- endif -%}
 
-  <div class="bd-toc-item {{ active }}">
+  <div class="bd-toc-item{% unless active == nil %} {{ active }}{% endunless %}">
       <a class="bd-toc-link" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ link_slug }}{% if link_slug %}/{% endif %}">
         {{ group.title }}
       </a>
 
       <ul class="nav bd-sidenav">
-        {% for doc in group.pages %}
-          {% assign doc_slug = doc.title | slugify %}
-          {% assign active = nil %}
+        {%- for doc in group.pages -%}
+          {%- assign doc_slug = doc.title | slugify -%}
+          {%- assign active = nil -%}
 
-          {% if page.group == group_slug and page_slug == doc_slug %}
-            {% assign active = 'active bd-sidenav-active' %}
-          {% endif %}
+          {%- if page.group == group_slug and page_slug == doc_slug -%}
+            {%- assign active = 'active bd-sidenav-active' -%}
+          {%- endif -%}
 
-          <li class="{{ active }}">
+          <li{% unless active == nil %} class="{{ active }}"{% endunless %}>
             <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ doc_slug }}/">
               {{ doc.title }}
             </a>
@@ -50,8 +50,8 @@
             {% endunless %}
             {% endcomment %}
           </li>
-        {% endfor %}
+        {%- endfor -%}
       </ul>
     </div>
-  {% endfor %}
+  {%- endfor -%}
 </nav>

_includes/favicons.html

+<!-- Favicons -->
+<link rel="apple-touch-icon" href="{{ site.baseurl }}/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="{{ site.baseurl }}/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="{{ site.baseurl }}/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="{{ site.baseurl }}/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="{{ site.baseurl }}/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="icon" href="{{ site.baseurl }}/favicon.ico">
+<meta name="msapplication-config" content="{{ site.baseurl }}/assets/img/favicons/browserconfig.xml">
+<meta name="theme-color" content="#563d7c">

_includes/footer.html

 <footer class="bd-footer text-muted">
-  <div class="container">
+  <div class="container-fluid p-3 p-md-5">
     <ul class="bd-footer-links">
       <li><a href="{{ site.repo }}">GitHub</a></li>
       <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
-      <li><a href="{{ site.baseurl }}/examples/">Examples</a></li>
-      <li><a href="{{ site.baseurl }}/about/history/">About</a></li>
+      <li><a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/">Examples</a></li>
+      <li><a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/about/">About</a></li>
     </ul>
     <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank" rel="noopener">@mdo</a> and <a href="https://twitter.com/fat" target="_blank" rel="noopener">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
     <p>Currently v{{ site.current_version }}. Code licensed <a rel="license noopener" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license noopener" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>

_includes/header.html

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="generator" content="Jekyll v{{ jekyll.version }}">
 
 <title>
-  {% if page.title %}
+  {%- if page.title -%}
     {{ page.title }} &middot; {{ site.title }}
-  {% else %}
+  {%- else -%}
     {{ site.title }} &middot; {{ site.description }}
-  {% endif %}
+  {%- endif -%}
 </title>
 
-{% include social.html %}
-
 <!-- Bootstrap core CSS -->
 {% if site.github %}
   <link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -20,13 +19,13 @@
 
 <!-- Documentation extras -->
 {% if page.layout == "docs" %}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
+<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
 {% endif %}
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
 
-<!-- Favicons -->
-<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
-<link rel="icon" href="{{ site.baseurl }}/favicon.ico">
+{% include favicons.html %}
+
+{% include social.html %}
 
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

_includes/icons/bootstrap.svg

-<svg {% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
+<svg{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>

_includes/icons/download.svg

+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Download icon</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>

_includes/icons/import.svg

+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Import icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>

_includes/icons/lightning.svg

+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Lightning icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>

_includes/scripts.html

@@ -16,16 +16,15 @@
   <script src="{{ site.baseurl }}/assets/js/vendor/clipboard.min.js"></script>
   <script src="{{ site.baseurl }}/assets/js/vendor/holder.min.js"></script>
   <script src="{{ site.baseurl }}/assets/js/src/application.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/src/pwa.js"></script>
 {% endif %}
 
-<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
 <script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
 
 {% if page.layout == "docs" %}
-<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-<script type="text/javascript">
-  var docsearch = docsearch({
+<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+<script>
+  docsearch({
     apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
     indexName: 'bootstrap-v4',
     inputSelector: '#search-input',
@@ -47,10 +46,10 @@
 {% endif %}
 
 <script>
-Holder.addTheme('gray', {
-  bg: '#777',
-  fg: 'rgba(255,255,255,.75)',
-  font: 'Helvetica',
-  fontweight: 'normal'
-})
+  Holder.addTheme('gray', {
+    bg: '#777',
+    fg: 'rgba(255,255,255,.75)',
+    font: 'Helvetica',
+    fontweight: 'normal'
+  });
 </script>

_includes/social.html

+<!-- Meta -->
+<meta name="description" content="{{ site.description }}">
+<meta name="author" content="{{ site.authors }}">
+
 <!-- Twitter -->
 <meta name="twitter:site" content="@{{ site.twitter }}">
 <meta name="twitter:creator" content="@{{ site.twitter }}">
@@ -30,7 +34,3 @@
 <meta property="og:image:type" content="image/png">
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="630">
-
-<!-- Meta -->
-<meta name="description" content="{{ site.description }}">
-<meta name="author" content="{{ site.authors }}">

_layouts/default.html

-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     {% include header.html %}
@@ -12,9 +12,13 @@
 
     {% include docs-navbar.html %}
 
-    <main id="content" role="main">
+    {% if page.layout == "simple" %}
         {{ content }}
-    </main>
+    {% else %}
+        <main id="content" role="main">
+            {{ content }}
+        </main>
+    {% endif %}
 
     {% include footer.html %}
     {% include scripts.html %}

_layouts/docs.html

-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     {% include header.html %}

_layouts/home.html

-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     {% include header.html %}

_layouts/redirect.html

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Bootstrap - Content moved</title>
+    <link rel="canonical" href="{{ page.redirect.to }}">
+    <meta http-equiv="refresh" content="0; url={{ page.redirect.to }}">
+    <style>
+      html {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        width: 100vw;
+        height: 100vh;
+        text-align: center;
+      }
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      }
+      h1 {
+        margin-top: 0;
+        margin-bottom: .5rem;
+      }
+      a {
+        color: #007bff;
+        text-decoration: none;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Redirecting…</h1>
+    <a href="{{ page.redirect.to }}">Click here if you are not redirected</a>
+    <script>window.location="{{ page.redirect.to }}";</script>
+  </body>
+</html>

_layouts/simple.html

@@ -2,16 +2,11 @@
 layout: default
 ---
 
-<div class="bd-pageheader text-center text-sm-left">
-  <div class="container">
-    <h1>{{ page.title }}</h1>
-    <p class="lead">
-      Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
-    </p>
+<div class="container my-5">
+  <main class="bd-content" role="main">
+    <h1 class="bd-title" id="content">{{ page.title }}</h1>
+    <p class="bd-lead">{{ page.description }}</p>
     {% include ads.html %}
-  </div>
-</div>
-
-<div class="container bd-content">
-  {{ content }}
+    {{ content }}
+  </main>
 </div>

_plugins/example.rb

@@ -34,7 +34,7 @@ Syntax Error in tag 'example' while parsing the following markup:
 
   #{markup}
 
-Valid syntax: example <lang>
+Valid syntax: example <lang> [id=foo]
 eos
         end
       end
@@ -55,7 +55,7 @@ eos
       end
 
       def example(output)
-        "<div class=\"bd-example\" data-example-id=\"#{@options[:id]}\">\n#{output}\n</div>"
+        "<div class=\"bd-example\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n#{output}\n</div>"
       end
 
       def remove_holderjs(code)