Reorganize docs for easier deploys

With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager.
2025-08-30 08:39:56 +02:00 · 2018-06-21 07:31:38 +03:00
parent 9e126b26a8
commit 0e920ce3f4
243 changed files with 171 additions and 186 deletions
--- a/site/_data/breakpoints.yml
+++ b/site/_data/breakpoints.yml
@@ -0,0 +1,29 @@
+- breakpoint: xs
+  abbr: ""
+  name: Extra small
+  min-width: 0px
+  container: ""
+
+- breakpoint: sm
+  abbr: -sm
+  name: Small
+  min-width: 576px
+  container: 540px
+
+- breakpoint: md
+  abbr: -md
+  name: Medium
+  min-width: 768px
+  container: 720px
+
+- breakpoint: lg
+  abbr: -lg
+  name: Large
+  min-width: 992px
+  container: 960px
+
+- breakpoint: xl
+  abbr: -xl
+  name: Extra large
+  min-width: 1200px
+  container: 1140px
--- a/site/_data/browser-bugs.yml
+++ b/site/_data/browser-bugs.yml
@@ -0,0 +1,451 @@
+-
+  browser: >
+    Edge
+  summary: >
+    Visual artifacts in scrollable modal dialogs
+  upstream_bug: >
+    Edge#9011176
+  origin: >
+    Bootstrap#20755
+
+-
+  browser: >
+    Edge
+  summary: >
+    Native browser tooltip for `title` shows on first keyboard focus (in addition to custom tooltip component)
+  upstream_bug: >
+    Edge#6793560
+  origin: >
+    Bootstrap#18692
+
+-
+  browser: >
+    Edge
+  summary: >
+    Hovered element still remains in `:hover` state after scrolling away.
+  upstream_bug: >
+    Edge#5381673
+  origin: >
+    Bootstrap#14211
+
+-
+  browser: >
+    Edge
+  summary: >
+    CSS `border-radius` sometimes causes lines of bleed-through of the `background-color` of the parent element.
+  upstream_bug: >
+    Edge#3342037
+  origin: >
+    Bootstrap#16671
+
+-
+  browser: >
+    Edge
+  summary: >
+    `background` of `<tr>` is only applied to first child cell instead of all cells in the row
+  upstream_bug: >
+    Edge#5865620
+  origin: >
+    Bootstrap#18504
+
+-
+  browser: >
+    Edge
+  summary: >
+    `@-ms-viewport{width: device-width;}` has side-effect of making scrollbars auto-hide
+  upstream_bug: >
+    Edge#7165383
+  origin: >
+    Bootstrap#18543
+
+-
+  browser: >
+    Edge
+  summary: >
+    Background color from lower layer bleeds through transparent border in some cases
+  upstream_bug: >
+    Edge#6274505
+  origin: >
+    Bootstrap#18228
+
+-
+  browser: >
+    Edge
+  summary: >
+    Hovering over descendant SVG element fires `mouseleave` event at ancestor
+  upstream_bug: >
+    Edge#7787318
+  origin: >
+    Bootstrap#19670
+
+-
+  browser: >
+    Edge
+  summary: >
+    Active `position: fixed;` `<button>` flickers when scrolling
+  upstream_bug: >
+    Edge#8770398
+  origin: >
+    Bootstrap#20507
+
+-
+  browser: >
+    Firefox
+  summary: >
+    `.table-bordered` with an empty `<tbody>` is missing borders.
+  upstream_bug: >
+    Mozilla#1023761
+  origin: >
+    Bootstrap#13453
+
+-
+  browser: >
+    Firefox
+  summary: >
+    If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.
+  upstream_bug: >
+    Mozilla#654072
+  origin: >
+    Bootstrap#793
+
+-
+  browser: >
+    Firefox
+  summary: >
+    `focus` events should not be fired at the `document` object
+  upstream_bug: >
+    Mozilla#1228802
+  origin: >
+    Bootstrap#18365
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Wide floated table doesn't wrap onto new line
+  upstream_bug: >
+    Mozilla#1277782
+  origin: >
+    Bootstrap#19839
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Mouse sometimes not within element for purposes of `mouseenter`/`mouseleave` when it's within SVG elements
+  upstream_bug: >
+    Mozilla#577785
+  origin: >
+    Bootstrap#19670
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Layout with floated columns breaks when printing
+  upstream_bug: >
+    Mozilla#1315994
+  origin: >
+    Bootstrap#21092
+
+-
+  browser: >
+    Firefox (Windows)
+  summary: >
+    Right border of `<select>` menu is sometimes missing when screen is set to uncommon resolution
+  upstream_bug: >
+    Mozilla#545685
+  origin: >
+    Bootstrap#15990
+
+-
+  browser: >
+    Firefox (macOS & Linux)
+  summary: >
+    Badge widget causes bottom border of Tabs widget to unexpectedly not overlap
+  upstream_bug: >
+    Mozilla#1259972
+  origin: >
+    Bootstrap#19626
+
+-
+  browser: >
+    Chrome (Android)
+  summary: >
+    Tapping on an `<input>` in a scrollable overlay doesn't scroll the `<input>` into view
+  upstream_bug: >
+    Chromium#595210
+  origin: >
+    Bootstrap#17338
+
+-
+  browser: >
+    Chrome (macOS)
+  summary: >
+    Clicking above `<input type="number">` increment button flashes the decrement button.
+  upstream_bug: >
+    Chromium#419108
+  origin: >
+    Offshoot of Bootstrap#8350 & Chromium#337668
+
+-
+  browser: >
+    Chrome
+  summary: >
+    CSS infinite linear animation with alpha transparency leaks memory.
+  upstream_bug: >
+    Chromium#429375
+  origin: >
+    Bootstrap#14409
+
+-
+  browser: >
+    Chrome
+  summary: >
+    `table-cell` borders not overlapping despite `margin-right: -1px`
+  upstream_bug: >
+    Chromium#749848
+  origin: >
+    Bootstrap#17438, Bootstrap#14237
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Clicking scrollbar in `<select multiple>` with overflowed options will select nearby `<option>`
+  upstream_bug: >
+    Chromium#597642
+  origin: >
+    Bootstrap#19810
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Don't make `:hover` sticky on touch-friendly webpages
+  upstream_bug: >
+    Chromium#370155
+  origin: >
+    Bootstrap#12832
+
+-
+  browser: >
+    Chrome
+  summary: >
+    `position: absolute` element that's wider than its column is incorrectly clipped to column boundary
+  upstream_bug: >
+    Chromium#269061
+  origin: >
+    Bootstrap#20161
+
+-
+  browser: >
+    Chrome (Windows & Linux)
+  summary: >
+    Animation glitch when returning to inactive tab after animations occurred while tab was hidden.
+  upstream_bug: >
+    Chromium#449180
+  origin: >
+    Bootstrap#15298
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Significant performance hit for dynamic SVGs with text depending on the number of fonts in `font-family`.
+  upstream_bug: >
+    Chromium#781344
+  origin: >
+    Bootstrap#24673
+
+-
+  browser: >
+    Safari
+  summary: >
+    `rem` units in media queries should be calculated using `font-size: initial`, not the root element's `font-size`
+  upstream_bug: >
+    WebKit#156684
+  origin: >
+    Bootstrap#17403
+
+-
+  browser: >
+    Safari
+  summary: >
+    Link to container with id and tabindex results in container being ignored by VoiceOver (affects skip links)
+  upstream_bug: >
+    WebKit#163658
+  origin: >
+    Bootstrap#20732
+
+-
+  browser: >
+    Safari
+  summary: >
+    CSS `min-width` and `max-width` media features should not round fractional pixel
+  upstream_bug: >
+    WebKit#178261
+  origin: >
+    Bootstrap#25166
+
+-
+  browser: >
+    Safari (macOS)
+  summary: >
+    `px`, `em`, and `rem` should all behave the same in media queries when page zoom is applied
+  upstream_bug: >
+    WebKit#156687
+  origin: >
+    Bootstrap#17403
+
+-
+  browser: >
+    Safari (macOS)
+  summary: >
+    Weird button behavior with some `<input type="number">` elements.
+  upstream_bug: >
+    WebKit#137269, Safari#18834768
+  origin: >
+    Bootstrap#8350,
+    Normalize#283,
+    Chromium#337668
+
+-
+  browser: >
+    Safari (macOS)
+  summary: >
+    Small font size when printing webpage with fixed-width `.container`.
+  upstream_bug: >
+    WebKit#138192, Safari#19435018
+  origin: >
+    Bootstrap#14868
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `transform: translate3d(0,0,0);` rendering bug.
+  upstream_bug: >
+    WebKit#138162, Safari#18804973
+  origin: >
+    Bootstrap#14603
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Text input's cursor doesn't move while scrolling the page.
+  upstream_bug: >
+    WebKit#138201, Safari#18819624
+  origin: >
+    Bootstrap#14708
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Can't move cursor to start of text after entering long string of text into `<input type="text">`
+  upstream_bug: >
+    WebKit#148061, Safari#22299624
+  origin: >
+    Bootstrap#16988
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `display: block` causes text of temporal `<input>`s to become vertically misaligned
+  upstream_bug: >
+    WebKit#139848, Safari#19434878
+  origin: >
+    Bootstrap#11266, Bootstrap#13098
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Tapping on `<body>` doesn't fire `click` events
+  upstream_bug: >
+    WebKit#151933
+  origin: >
+    Bootstrap#16028
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `position:fixed` is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari
+  upstream_bug: >
+    WebKit#153056
+  origin: >
+    Bootstrap#18859
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Tapping into an `<input>` within a `position:fixed` element scrolls to the top of the page
+  upstream_bug: >
+    WebKit#153224, Safari#24235301
+  origin: >
+    Bootstrap#17497
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    `<body>` with `overflow:hidden` CSS is scrollable on iOS
+  upstream_bug: >
+    WebKit#153852
+  origin: >
+    Bootstrap#14839
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Scroll gesture in text field in `position:fixed` element sometimes scrolls `<body>` instead of scrollable ancestor
+  upstream_bug: >
+    WebKit#153856
+  origin: >
+    Bootstrap#14839
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Modal with `-webkit-overflow-scrolling: touch` doesn't become scrollable after added text makes it taller
+  upstream_bug: >
+    WebKit#158342
+  origin: >
+    Bootstrap#17695
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Don't make `:hover` sticky on touch-friendly webpages
+  upstream_bug: >
+    WebKit#158517
+  origin: >
+    Bootstrap#12832
+
+-
+  browser: >
+    Safari (iOS)
+  summary: >
+    Element which is `position:fixed` disappears after opening a `<select>` menu
+  upstream_bug: >
+    WebKit#162362
+  origin: >
+    Bootstrap#20759
+
+-
+  browser: >
+    Safari (iPad Pro)
+  summary: >
+    Rendering of descendants of `position: fixed` element gets clipped on iPad Pro in Landscape orientation
+  upstream_bug: >
+    WebKit#152637, Safari#24030853
+  origin: >
+    Bootstrap#18738
--- a/site/_data/browser-features.yml
+++ b/site/_data/browser-features.yml
@@ -0,0 +1,139 @@
+-
+  browser: >
+    Edge
+  summary: >
+    Focusable elements should fire focus event / receive :focus styling when they receive Narrator/accessibility focus
+  upstream_bug: >
+    A11yUserVoice#16717318
+  origin: >
+    Bootstrap#20732
+
+-
+  browser: >
+    Edge
+  summary: >
+    Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
+  upstream_bug: >
+    UserVoice#12299532
+  origin: >
+    Bootstrap#19984
+
+-
+  browser: >
+    Edge
+  summary: >
+    Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+  upstream_bug: >
+    UserVoice#6508895
+  origin: >
+    Bootstrap#20175
+
+-
+  browser: >
+    Edge
+  summary: >
+    Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
+  upstream_bug: >
+    UserVoice#15939898
+  origin: >
+    Bootstrap#20618
+
+-
+  browser: >
+    Edge
+  summary: >
+    Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+  upstream_bug: >
+    UserVoice#15944476
+  origin: >
+    Bootstrap#20143
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+  upstream_bug: >
+    Mozilla#854148
+  origin: >
+    Bootstrap#20143
+
+-
+  browser: >
+    Firefox
+  summary: >
+    Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+  upstream_bug: >
+    Mozilla#840640
+  origin: >
+    Bootstrap#20175
+
+-
+  browser: >
+    Firefox
+  summary: >
+    When virtual focus is on a button or link, fire actual focus on the element, too
+  upstream_bug: >
+    Mozilla#1000082
+  origin: >
+    Bootstrap#20732
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
+  upstream_bug: >
+    Chromium#642487
+  origin: >
+    Chromium#437860
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
+  upstream_bug: >
+    Chromium#304163
+  origin: >
+    Bootstrap#20143
+
+-
+  browser: >
+    Chrome
+  summary: >
+    Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
+  upstream_bug: >
+    Chromium#576815
+  origin: >
+    Bootstrap#19984
+
+-
+  browser: >
+    Safari
+  summary: >
+    Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
+  upstream_bug: >
+    WebKit#161535
+  origin: >
+    Bootstrap#20618
+
+-
+  browser: >
+    Safari
+  summary: >
+    Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
+  upstream_bug: >
+    WebKit#64861
+  origin: >
+    Bootstrap#19984
+
+-
+  browser: >
+    Safari
+  summary: >
+    Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+  upstream_bug: >
+    WebKit#84635
+  origin: >
+    Bootstrap#20175
--- a/site/_data/colors.yml
+++ b/site/_data/colors.yml
@@ -0,0 +1,26 @@
+- name: blue
+  hex: "#007bff"
+- name: indigo
+  hex: "#6610f2"
+- name: purple
+  hex: "#6f42c1"
+- name: pink
+  hex: "#e83e8c"
+- name: red
+  hex: "#dc3545"
+- name: orange
+  hex: "#fd7e14"
+- name: yellow
+  hex: "#ffc107"
+- name: green
+  hex: "#28a745"
+- name: teal
+  hex: "#20c997"
+- name: cyan
+  hex: "#17a2b8"
+- name: white
+  hex: "#fff"
+- name: gray
+  hex: "#868e96"
+- name: gray-dark
+  hex: "#343a40"
--- a/site/_data/examples.yml
+++ b/site/_data/examples.yml
@@ -0,0 +1,55 @@
+- category: Custom components
+  description: "Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework."
+  examples:
+    - name: Album
+      description: "Simple one-page template for photo galleries, portfolios, and more."
+    - name: Pricing
+      description: "Example pricing page built with Cards and featuring a custom header and footer."
+    - name: Checkout
+      description: "Custom checkout form showing our form components and their validation features."
+    - name: Product
+      description: "Lean product-focused marketing page with extensive grid and image work."
+    - name: Cover
+      description: "A one-page template for building simple and beautiful home pages."
+    - name: Carousel
+      description: "Customize the navbar and carousel, then add some new components."
+    - name: Blog
+      description: "Magazine like blog template with header, navigation, featured content."
+    - name: Dashboard
+      description: "Basic admin dashboard shell with fixed sidebar and navbar."
+    - name: Sign-in
+      description: "Custom form layout and design for a simple sign in form."
+    - name: Sticky footer
+      description: "Attach a footer to the bottom of the viewport when page content is short."
+    - name: Sticky footer navbar
+      description: "Attach a footer to the bottom of the viewport with a fixed top navbar."
+
+- category: Framework
+  description: "Examples that focus on implementing uses of built-in components provided by Bootstrap."
+  examples:
+    - name: "Starter template"
+      description: "Nothing but the basics: compiled CSS and JavaScript."
+    - name: Grid
+      description: "Multiple examples of grid layouts with all four tiers, nesting, and more."
+    - name: Jumbotron
+      description: "Build around the jumbotron with a navbar and some basic grid columns."
+
+- category: Navbars
+  description: "Taking the default navbar component and showing how it can be moved, placed, and extended."
+  examples:
+    - name: Navbars
+      description: "Demonstration of all responsive and container options for the navbar."
+    - name: Navbar static
+      description: "Single navbar example of a static top navbar along with some additional content."
+    - name: Navbar fixed
+      description: "Single navbar example with a fixed top navbar along with some additional content."
+    - name: Navbar bottom
+      description: "Single navbar example with a bottom navbar along with some additional content."
+
+- category: Experiments
+  description: "Examples that focus on future-friendly features or techniques."
+  examples:
+    - name: Floating labels
+      description: "Beautifully simple forms with floating labels over your inputs."
+    - name: Offcanvas
+      description: "Turn your expandable navbar into a sliding offcanvas menu."
--- a/site/_data/grays.yml
+++ b/site/_data/grays.yml
@@ -0,0 +1,18 @@
+- name: 100
+  hex: "#f8f9fa"
+- name: 200
+  hex: "#e9ecef"
+- name: 300
+  hex: "#dee2e6"
+- name: 400
+  hex: "#ced4da"
+- name: 500
+  hex: "#adb5bd"
+- name: 600
+  hex: "#868e96"
+- name: 700
+  hex: "#495057"
+- name: 800
+  hex: "#343a40"
+- name: 900
+  hex: "#212529"
--- a/site/_data/nav.yml
+++ b/site/_data/nav.yml
@@ -0,0 +1,86 @@
+- title: Getting started
+  pages:
+    - title: Introduction
+    - title: Download
+    - title: Contents
+    - title: Browsers & devices
+    - title: JavaScript
+    - title: Theming
+    - title: Build tools
+    # - title: Best practices # TODO: Write this content
+    - title: Webpack
+    - title: Accessibility
+
+- title: Layout
+  pages:
+    - title: Overview
+    - title: Grid
+    - title: Media object
+    - title: Utilities for layout
+
+- title: Content
+  pages:
+    - title: Reboot
+    - title: Typography
+    - title: Code
+    - title: Images
+    - title: Tables
+    - title: Figures
+
+- title: Components
+  pages:
+    - title: Alerts
+    - title: Badge
+    - title: Breadcrumb
+    - title: Buttons
+    - title: Button group
+    - title: Card
+    - title: Carousel
+    - title: Collapse
+    - title: Dropdowns
+    - title: Forms
+    - title: Input group
+    - title: Jumbotron
+    - title: List group
+    - title: Modal
+    - title: Navs
+    - title: Navbar
+    - title: Pagination
+    - title: Popovers
+    - title: Progress
+    - title: Scrollspy
+    - title: Tooltips
+
+- title: Utilities
+  pages:
+    - title: Borders
+    - title: Clearfix
+    - title: Close icon
+    - title: Colors
+    - title: Display
+    - title: Embed
+    - title: Flex
+    - title: Float
+    - title: Image replacement
+    - title: Position
+    - title: Screenreaders
+    - title: Shadows
+    - title: Sizing
+    - title: Spacing
+    - title: Text
+    - title: Vertical align
+    - title: Visibility
+
+- title: Extend
+  pages:
+    - title: Approach
+    - title: Icons
+
+- title: Migration
+
+- title: About
+  pages:
+    - title: Overview
+    - title: Brand
+    - title: License
+    - title: Translations
--- a/site/_data/theme-colors.yml
+++ b/site/_data/theme-colors.yml
@@ -0,0 +1,16 @@
+- name: primary
+  hex: "#007bff"
+- name: secondary
+  hex: "#868e96"
+- name: success
+  hex: "#28a745"
+- name: danger
+  hex: "#dc3545"
+- name: warning
+  hex: "#ffc107"
+- name: info
+  hex: "#17a2b8"
+- name: light
+  hex: "#f8f9fa"
+- name: dark
+  hex: "#343a40"
--- a/site/_data/translations.yml
+++ b/site/_data/translations.yml
@@ -0,0 +1,19 @@
+- name: 中文(繁體)
+  code: zh-tw
+  description: Bootstrap 4 繁體中文手冊
+  url: http://bootstrap.hexschool.com/
+
+- name: Chinese
+  code: zh
+  description: Bootstrap 4 · 全球最流行的 HTML、CSS 和 JS 工具库。
+  url: https://code.z01.com/v4
+
+- name: Chinese
+  code: zh
+  description: Bootstrap 4 中文文档教程
+  url: https://wiki.jikexueyuan.com/project/bootstrap4/
+
+- name: Brazilian Portuguese
+  code: pt-BR
+  description: Bootstrap 4 Português do Brasil
+  url: http://getbootstrap.com.br/v4/
--- a/site/_includes/ads.html
+++ b/site/_includes/ads.html
@@ -0,0 +1 @@
+<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
--- a/site/_includes/bugify.html
+++ b/site/_includes/bugify.html
@@ -0,0 +1,42 @@
+{%- comment -%}
+Usage: {% include bugify.html content=text %},
+where content is a string that contains a bug reference name and id.
+e.g. Bootstrap#19984
+{%- endcomment -%}
+
+{%- assign words = include.content | split: " " -%}
+
+{%- for word in words -%}
+  {% if word contains "#" %}
+    {% if word contains "," %}{% assign separator = true %}{% else %}{% assign separator = false %}{% endif %}
+    {%- assign data = word | split: "#" -%}
+    {%- assign bug_cat = data[0] | strip_newlines -%}
+    {%- assign bug_id  = data[1] | strip_newlines | remove: "," -%}
+
+    {%- case bug_cat -%}
+    {%- when "Bootstrap" -%}
+      <a href="https://github.com/twbs/bootstrap/issues/{{ bug_id }}">#{{ bug_id }}</a>
+    {%- when "Edge" -%}
+      <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/{{ bug_id }}">Edge issue #{{ bug_id }}</a>
+    {%- when "A11yUserVoice" -%}
+      <a href="https://microsoftaccessibility.uservoice.com/forums/307429-microsoft-accessibility-feedback/suggestions/{{ bug_id }}">Microsoft A11y UserVoice idea #{{ bug_id }}</a>
+    {%- when "UserVoice" -%}
+      <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/{{ bug_id }}">Edge UserVoice idea #{{ bug_id }}</a>
+    {%- when "Mozilla" -%}
+      <a href="https://bugzilla.mozilla.org/show_bug.cgi?id={{ bug_id }}">Mozilla bug #{{ bug_id }}</a>
+    {%- when "Chromium" -%}
+      <a href="https://bugs.chromium.org/p/chromium/issues/detail?id={{ bug_id }}">Chromium issue #{{ bug_id }}</a>
+    {%- when "WebKit" -%}
+      <a href="https://bugs.webkit.org/show_bug.cgi?id={{ bug_id }}">WebKit bug #{{ bug_id }}</a>
+    {%- when "Safari" -%}
+      <a href="https://openradar.appspot.com/{{ bug_id }}">Apple Safari Radar #{{ bug_id }}</a>
+    {%- when "Normalize" -%}
+      <a href="https://github.com/necolas/normalize.css/issues/{{ bug_id }}">Normalize #{{ bug_id }}</a>
+    {%- else -%}
+      <strong>parse error</strong>
+    {%- endcase -%}{% if separator %}, {% endif %}
+
+  {% else %}
+    {{ word }}
+  {%- endif -%}
+{%- endfor -%}
--- a/site/_includes/callout-danger-async-methods.md
+++ b/site/_includes/callout-danger-async-methods.md
@@ -0,0 +1,8 @@
+{% capture callout %}
+#### Asynchronous methods and transitions
+
+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 information.]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/)
+{% endcapture %}
+{% include callout.html content=callout type="danger" %}
--- a/site/_includes/callout-info-mediaqueries-breakpoints.md
+++ b/site/_includes/callout-info-mediaqueries-breakpoints.md
@@ -0,0 +1,4 @@
+{% capture callout %}
+Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
--- a/site/_includes/callout-warning-color-assistive-technologies.md
+++ b/site/_includes/callout-warning-color-assistive-technologies.md
@@ -0,0 +1,6 @@
+{% capture callout %}
+##### 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.
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
--- a/site/_includes/callout.html
+++ b/site/_includes/callout.html
@@ -0,0 +1,9 @@
+{%- comment -%}
+Usage: {% include callout.html content=callout type="type" %},
+where content is a capture with the content
+and type is one of: info (default), danger, warning
+{%- endcomment -%}
+{%- assign css_class = include.type | default: "info" -%}
+<div class="bd-callout bd-callout-{{ css_class }}">
+  {{- include.content | markdownify -}}
+</div>
--- a/site/_includes/docs-navbar.html
+++ b/site/_includes/docs-navbar.html
@@ -0,0 +1,65 @@
+<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
+  <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
+    {%- include icons/bootstrap.svg width="36" height="36" class="d-block" -%}
+  </a>
+
+  <div class="navbar-nav-scroll">
+    <ul class="navbar-nav bd-navbar-nav flex-row">
+      <li class="nav-item">
+        <a class="nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.jobs }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Jobs');" target="_blank" rel="noopener">Jobs</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
+      </li>
+    </ul>
+  </div>
+
+  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
+    <li class="nav-item dropdown">
+      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        v{{ site.docs_version }}
+      </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.1.x)</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
+      </div>
+    </li>
+
+    <li class="nav-item">
+      <a class="nav-link p-2" href="{{ site.repo }}" target="_blank" rel="noopener" aria-label="GitHub">
+        {%- include icons/github.svg class="navbar-nav-svg" -%}
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank" rel="noopener" aria-label="Twitter">
+        {%- include icons/twitter.svg class="navbar-nav-svg" -%}
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="{{ site.slack }}" target="_blank" rel="noopener" aria-label="Slack">
+        {%- include icons/slack.svg class="navbar-nav-svg" -%}
+      </a>
+    </li>
+  </ul>
+
+  <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
+</header>
--- a/site/_includes/docs-sidebar.html
+++ b/site/_includes/docs-sidebar.html
@@ -0,0 +1,57 @@
+<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" data-siteurl="{{ site.url }}" data-docs-version="{{ site.docs_version }}">
+  <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 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 -%}
+
+  {%- if page.group == group_slug -%}
+    {%- assign active = 'active' -%}
+  {%- endif -%}
+
+  <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 -%}
+
+          {%- if page.group == group_slug and page_slug == doc_slug -%}
+            {%- assign active = 'active bd-sidenav-active' -%}
+          {%- endif -%}
+
+          <li{% unless active == nil %} class="{{ active }}"{% endunless %}>
+            <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ doc_slug }}/">
+              {{ doc.title }}
+            </a>
+
+            {%- comment -%}
+            {% unless doc.sections == nil %}
+              <ul class="nav">
+                {% for section in doc.sections %}
+                  <li>
+                    <a href="#{{ section.title | downcase | replace: ' ', '-' }}">
+                      {{ section.title }}
+                    </a>
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endunless %}
+            {%- endcomment -%}
+          </li>
+        {%- endfor -%}
+      </ul>
+    </div>
+  {%- endfor -%}
+</nav>
--- a/site/_includes/example.html
+++ b/site/_includes/example.html
@@ -0,0 +1,23 @@
+{%- comment -%}
+Usage: {% include example.html content=markup %},
+where content is a capture with the HTML content
+id - null (default)
+class - "bd-example" (default)
+optional: hide_preview - disabled (default)
+optional: hide_markup - disabled (default)
+{%- endcomment -%}
+
+{%- assign preview_id = include.id -%}
+{%- assign preview_class = include.class -%}
+
+{%- if include.hide_preview == null -%}
+<div{% if preview_id %} id="{{ preview_id }}"{% endif %} class="bd-example{% if preview_class %} {{ preview_class }}{% endif %}">
+  {{- include.content -}}
+</div>
+{%- endif -%}
+
+{%- if include.hide_markup == null -%}
+  {%- highlight html -%}
+    {{- include.content | replace: 'data-src="holder.js', 'src="...' -}}
+  {%- endhighlight -%}
+{%- endif -%}
--- a/site/_includes/favicons.html
+++ b/site/_includes/favicons.html
@@ -0,0 +1,9 @@
+<!-- Favicons -->
+<link rel="apple-touch-icon" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="icon" href="{{ site.baseurl }}/favicon.ico">
+<meta name="msapplication-config" content="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/favicons/browserconfig.xml">
+<meta name="theme-color" content="#563d7c">
--- a/site/_includes/footer.html
+++ b/site/_includes/footer.html
@@ -0,0 +1,12 @@
+<footer class="bd-footer text-muted">
+  <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 }}/docs/{{ site.docs_version }}/examples/">Examples</a></li>
+      <li><a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/about/overview/">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 href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
+  </div>
+</footer>
--- a/site/_includes/header.html
+++ b/site/_includes/header.html
@@ -0,0 +1,39 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="description" content="{{ page.description | default: site.description | smartify }}">
+<meta name="author" content="{{ site.authors }}">
+<meta name="generator" content="Jekyll v{{ jekyll.version }}">
+
+<title>
+  {%- if page.title -%}
+    {{ page.title | smartify }} · {{ site.title | smartify }}
+  {%- else -%}
+    {{ site.title | smartify }} · {{ site.description | smartify }}
+  {%- endif -%}
+</title>
+
+<!-- Bootstrap core CSS -->
+{% if site.github %}
+<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
+{% else %}
+<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/css/bootstrap.css" rel="stylesheet">
+{% endif %}
+
+<!-- Documentation extras -->
+{% if page.layout == "docs" %}
+<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
+{% endif %}
+<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/css/docs.min.css" rel="stylesheet">
+
+{% include favicons.html %}
+
+{% include social.html %}
+
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  ga('create', 'UA-146052-10', 'getbootstrap.com');
+  ga('send', 'pageview');
+</script>
--- a/site/_includes/icons/bootstrap.svg
+++ b/site/_includes/icons/bootstrap.svg
@@ -0,0 +1 @@
+<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>
--- a/site/_includes/icons/download.svg
+++ b/site/_includes/icons/download.svg
@@ -0,0 +1 @@
+<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>
--- a/site/_includes/icons/github.svg
+++ b/site/_includes/icons/github.svg
@@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
--- a/site/_includes/icons/import.svg
+++ b/site/_includes/icons/import.svg
@@ -0,0 +1 @@
+<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="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></svg>
--- a/site/_includes/icons/lightning.svg
+++ b/site/_includes/icons/lightning.svg
@@ -0,0 +1 @@
+<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>
--- a/site/_includes/icons/menu.svg
+++ b/site/_includes/icons/menu.svg
@@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
--- a/site/_includes/icons/slack.svg
+++ b/site/_includes/icons/slack.svg
@@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
--- a/site/_includes/icons/twitter.svg
+++ b/site/_includes/icons/twitter.svg
@@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
--- a/site/_includes/scripts.html
+++ b/site/_includes/scripts.html
@@ -0,0 +1,26 @@
+<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
+<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
+
+<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/popper.min.js"{% if site.github %} integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"{% endif %}></script>
+
+{%- if site.github -%}
+  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/js/bootstrap.min.js" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
+{%- else -%}
+  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/js/bootstrap.js"></script>
+{%- endif -%}
+
+{%- if page.layout == "docs" -%}
+<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+{%- endif -%}
+
+{%- if site.github -%}
+  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/docs.min.js"></script>
+{%- else -%}
+  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/anchor.min.js"></script>
+  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/clipboard.min.js"></script>
+  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/holder.min.js"></script>
+  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/src/application.js"></script>
+  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/src/search.js"></script>
+  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/src/ie-emulation-modes-warning.js"></script>
+  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/src/pwa.js"></script>
+{%- endif -%}
--- a/site/_includes/skippy.html
+++ b/site/_includes/skippy.html
@@ -0,0 +1,5 @@
+<a id="skippy" class="sr-only sr-only-focusable" href="#content">
+  <div class="container">
+    <span class="skiplink-text">Skip to main content</span>
+  </div>
+</a>
--- a/site/_includes/social.html
+++ b/site/_includes/social.html
@@ -0,0 +1,18 @@
+<!-- Twitter -->
+<meta name="twitter:card" content="{% if page.title %}summary{% else %}summary_large_image{% endif %}">
+<meta name="twitter:site" content="@{{ site.twitter }}">
+<meta name="twitter:creator" content="@{{ site.twitter }}">
+<meta name="twitter:title" content="{{ page.title | default: site.title | smartify }}">
+<meta name="twitter:description" content="{{ page.description | default: site.description | smartify }}">
+<meta name="twitter:image" content="{% if page.title %}{{ site.url | append: site.social_logo_path }}{% else %}{{ site.url | append: site.social_image_path }}{% endif %}">
+
+<!-- Facebook -->
+<meta property="og:url" content="{{ site.url | append: page.url }}">
+<meta property="og:title" content="{{ page.title | default: site.title | smartify }}">
+<meta property="og:description" content="{{ page.description | default: site.description | smartify }}">
+<meta property="og:type" content="website">
+<meta property="og:image" content="{{ site.url | replace: 'https://', 'http://' | append: site.social_image_path }}">
+<meta property="og:image:secure_url" content="{{ site.url | append: site.social_image_path }}">
+<meta property="og:image:type" content="image/png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    {% include header.html %}
+  </head>
+  <body>
+    {% include skippy.html %}
+
+    {% include docs-navbar.html %}
+
+    {% if page.layout == "simple" or page.layout == "examples" %}
+      {{ content }}
+    {% else %}
+      <main id="content" role="main">
+        {{ content }}
+      </main>
+    {% endif %}
+
+    {% include footer.html %}
+    {% include scripts.html %}
+  </body>
+</html>
--- a/site/_layouts/docs.html
+++ b/site/_layouts/docs.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    {% include header.html %}
+  </head>
+  <body>
+    {% include skippy.html %}
+
+    {% include docs-navbar.html %}
+
+    <div class="container-fluid">
+      <div class="row flex-xl-nowrap">
+        <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
+          {% include docs-sidebar.html %}
+        </div>
+
+        {% if page.toc %}
+          <div class="d-none d-xl-block col-xl-2 bd-toc">
+            {{ content | toc_only }}
+          </div>
+        {% endif %}
+
+        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
+          <h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
+          <p class="bd-lead">{{ page.description | smartify }}</p>
+          {% include ads.html %}
+          {{ content }}
+        </main>
+      </div>
+    </div>
+
+    {% include scripts.html %}
+  </body>
+</html>
--- a/site/_layouts/examples.html
+++ b/site/_layouts/examples.html
@@ -0,0 +1,16 @@
+---
+layout: default
+---
+
+<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
+  <div class="pt-md-3 pb-md-4">
+    <h1 class="bd-title mt-0">{{ page.title | smartify }}</h1>
+    <p class="bd-lead">{{ page.description | smartify }}</p>
+    <a href="{{ site.download.source }}" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
+  </div>
+  {% include ads.html %}
+</header>
+
+<main class="bd-content p-5" id="content" role="main">
+  {{ content }}
+</main>
--- a/site/_layouts/home.html
+++ b/site/_layouts/home.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    {% include header.html %}
+  </head>
+  <body>
+    {% include skippy.html %}
+
+    {% include docs-navbar.html %}
+
+    {{ content }}
+
+    {% include footer.html %}
+    {% include scripts.html %}
+  </body>
+</html>
--- a/site/_layouts/redirect.html
+++ b/site/_layouts/redirect.html
@@ -0,0 +1,38 @@
+<!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 }}">
+    <script>window.location="{{ page.redirect.to }}";</script>
+    <meta http-equiv="refresh" content="0; url={{ page.redirect.to }}">
+    <meta name="robots" content="noindex">
+    <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&hellip;</h1>
+    <a href="{{ page.redirect.to }}">Click here if you are not redirected</a>
+  </body>
+</html>
--- a/site/_layouts/simple.html
+++ b/site/_layouts/simple.html
@@ -0,0 +1,12 @@
+---
+layout: default
+---
+
+<div class="container my-5">
+  <main class="bd-content" role="main">
+    <h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
+    <p class="bd-lead">{{ page.description | smartify }}</p>
+    {% include ads.html %}
+    {{ content }}
+  </main>
+</div>
--- a/site/docs/4.1/about/brand.md
+++ b/site/docs/4.1/about/brand.md
@@ -0,0 +1,78 @@
+---
+layout: docs
+title: Brand guidelines
+description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
+group: about
+toc: true
+---
+
+Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](https://mailchimp.com/about/brand-assets/).
+
+## Mark and logo
+
+Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap.
+
+<div class="bd-brand-logos">
+  <div class="bd-brand-item">
+    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
+  </div>
+  <div class="bd-brand-item inverse">
+    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
+  </div>
+</div>
+<div class="bd-brand-logos">
+  <div class="bd-brand-item">
+    <span class="h1">Bootstrap</span>
+  </div>
+  <div class="bd-brand-item inverse">
+    <span class="h1">Bootstrap</span>
+  </div>
+</div>
+
+## Download mark
+
+Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
+
+<div class="bd-brand-logos">
+  <div class="bd-brand-item">
+    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
+  </div>
+  <div class="bd-brand-item inverse">
+    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
+  </div>
+  <div class="bd-brand-item inverse">
+    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
+  </div>
+</div>
+
+## Name
+
+The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
+
+<div class="bd-brand-logos">
+  <div class="bd-brand-item">
+    <span class="h3">Bootstrap</span>
+    <strong class="text-success">Right</strong>
+  </div>
+  <div class="bd-brand-item">
+    <span class="h3 text-muted">BootStrap</span>
+    <strong class="text-warning">Wrong</strong>
+  </div>
+  <div class="bd-brand-item">
+    <span class="h3 text-muted">Twitter Bootstrap</span>
+    <strong class="text-warning">Wrong</strong>
+  </div>
+</div>
+
+## Colors
+
+Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
+
+<div class="bd-brand">
+  <div class="color-swatches">
+    <div class="color-swatch bd-purple"></div>
+    <div class="color-swatch bd-purple-light"></div>
+    <div class="color-swatch bd-purple-lighter"></div>
+    <div class="color-swatch bd-gray"></div>
+  </div>
+</div>
--- a/site/docs/4.1/about/license.md
+++ b/site/docs/4.1/about/license.md
@@ -0,0 +1,34 @@
+---
+layout: docs
+title: License FAQs
+description: Commonly asked questions about Bootstrap's open source license.
+group: about
+---
+
+Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
+
+#### It requires you to:
+
+* Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works
+
+#### It permits you to:
+
+- Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
+- Use Bootstrap in packages or distributions that you create
+- Modify the source code
+- Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license
+
+#### It forbids you to:
+
+- Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
+- Hold the creators or copyright holders of Bootstrap liable
+- Redistribute any piece of Bootstrap without proper attribution
+- Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
+- Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
+
+#### It does not require you to:
+
+- Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
+- Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
+
+The full Bootstrap license is located [in the project repository]({{ site.repo }}/blob/v{{ site.current_version }}/LICENSE) for more information.
--- a/site/docs/4.1/about/overview.md
+++ b/site/docs/4.1/about/overview.md
@@ -0,0 +1,28 @@
+---
+layout: docs
+title: About
+description: Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.
+redirect_from:
+  - "/docs/4.1/about/"
+  - "/docs/4.1/history/"
+  - "/docs/4.1/team/"
+group: about
+---
+
+## Team
+
+Bootstrap is maintained by a [small team of developers](https://github.com/orgs/twbs/people) on GitHub. We're actively looking to grow this team and would love to hear from you if you're excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.
+
+## History
+
+Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
+
+Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
+
+Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html) on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, we've since had over [twenty releases]({{ site.repo }}/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
+
+With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS's flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
+
+## Get involved
+
+Get involved with Bootstrap development by [opening an issue]({{ site.repo }}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{ site.repo }}/blob/v{{ site.current_version }}/.github/CONTRIBUTING.md) for information on how we develop.
--- a/site/docs/4.1/about/translations.md
+++ b/site/docs/4.1/about/translations.md
@@ -0,0 +1,18 @@
+---
+layout: docs
+title: Translations
+description: Links to community-translated Bootstrap documentation sites.
+group: about
+---
+
+Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.
+
+<ul>
+{% for language in site.data.translations %}
+  <li><a href="{{ language.url }}" hreflang="{{ language.code }}">{{ language.description }} ({{ language.name }})</a></li>
+{% endfor %}
+</ul>
+
+**We don't help organize or host translations, we just link to them.**
+
+Finished a new or better translation? Open a pull request to add it to our list.
--- a/site/docs/4.1/assets/brand/bootstrap-outline.svg
+++ b/site/docs/4.1/assets/brand/bootstrap-outline.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 180 612 612" fill="#FFF">
+  <path d="M510 186c25.5 0 49.6 10 67.8 28.2S606 256.5 606 282v408c0 25.5-10 49.6-28.2 67.8S535.5 786 510 786H102c-25.5 0-49.6-10-67.8-28.2S6 715.5 6 690V282c0-25.5 10-49.6 28.2-67.8S76.5 186 102 186h408m0-6H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102z"/>
+  <path d="M166.3 313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
+</svg>
--- a/site/docs/4.1/assets/brand/bootstrap-punchout.svg
+++ b/site/docs/4.1/assets/brand/bootstrap-punchout.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 180 612 612" fill="#FFF">
+  <path d="M383.5 521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8-.1-17.6-5.3-31.2-15.8-40.6zm-15.3-72c10-8.5 15-20.8 15-36.8 0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102c15 0 27.5-4.3 37.5-12.7z"/>
+  <path d="M510 180H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102zm-55.8 429.8c-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.3z"/>
+</svg>
--- a/site/docs/4.1/assets/brand/bootstrap-social-logo.png
+++ b/site/docs/4.1/assets/brand/bootstrap-social-logo.png
--- a/site/docs/4.1/assets/brand/bootstrap-social.png
+++ b/site/docs/4.1/assets/brand/bootstrap-social.png
--- a/site/docs/4.1/assets/brand/bootstrap-solid.svg
+++ b/site/docs/4.1/assets/brand/bootstrap-solid.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
+  <path fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
+  <path fill="#FFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
+</svg>
--- a/site/docs/4.1/assets/css/docs.min.css
+++ b/site/docs/4.1/assets/css/docs.min.css
--- a/site/docs/4.1/assets/css/docs.min.css.map
+++ b/site/docs/4.1/assets/css/docs.min.css.map
--- a/site/docs/4.1/assets/img/bootstrap-stack.png
+++ b/site/docs/4.1/assets/img/bootstrap-stack.png
--- a/site/docs/4.1/assets/img/bootstrap-themes.png
+++ b/site/docs/4.1/assets/img/bootstrap-themes.png
--- a/site/docs/4.1/assets/img/favicons/android-chrome-192x192.png
+++ b/site/docs/4.1/assets/img/favicons/android-chrome-192x192.png
--- a/site/docs/4.1/assets/img/favicons/android-chrome-512x512.png
+++ b/site/docs/4.1/assets/img/favicons/android-chrome-512x512.png
--- a/site/docs/4.1/assets/img/favicons/apple-touch-icon.png
+++ b/site/docs/4.1/assets/img/favicons/apple-touch-icon.png
--- a/site/docs/4.1/assets/img/favicons/browserconfig.xml
+++ b/site/docs/4.1/assets/img/favicons/browserconfig.xml
@@ -0,0 +1,11 @@
+---
+---
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/favicons/mstile-150x150.png"/>
+            <TileColor>#563d7c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/site/docs/4.1/assets/img/favicons/favicon-16x16.png
+++ b/site/docs/4.1/assets/img/favicons/favicon-16x16.png
--- a/site/docs/4.1/assets/img/favicons/favicon-32x32.png
+++ b/site/docs/4.1/assets/img/favicons/favicon-32x32.png
--- a/site/docs/4.1/assets/img/favicons/manifest.json
+++ b/site/docs/4.1/assets/img/favicons/manifest.json
@@ -0,0 +1,22 @@
+---
+---
+{
+    "name": "Bootstrap",
+    "short_name": "Bootstrap",
+    "icons": [
+        {
+            "src": "{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/favicons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/favicons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/",
+    "theme_color": "#563d7c",
+    "background_color": "#563d7c",
+    "display": "standalone"
+}
--- a/site/docs/4.1/assets/img/favicons/mstile-144x144.png
+++ b/site/docs/4.1/assets/img/favicons/mstile-144x144.png
--- a/site/docs/4.1/assets/img/favicons/mstile-150x150.png
+++ b/site/docs/4.1/assets/img/favicons/mstile-150x150.png
--- a/site/docs/4.1/assets/img/favicons/mstile-310x150.png
+++ b/site/docs/4.1/assets/img/favicons/mstile-310x150.png
--- a/site/docs/4.1/assets/img/favicons/mstile-310x310.png
+++ b/site/docs/4.1/assets/img/favicons/mstile-310x310.png
--- a/site/docs/4.1/assets/img/favicons/mstile-70x70.png
+++ b/site/docs/4.1/assets/img/favicons/mstile-70x70.png
--- a/site/docs/4.1/assets/img/favicons/safari-pinned-tab.svg
+++ b/site/docs/4.1/assets/img/favicons/safari-pinned-tab.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="933.333" height="933.333" version="1" viewBox="0 0 700 700">
+  <path d="M104.5.7C89.2 2.6 77.4 6.2 63.8 13.2 41.7 24.5 24.5 41.7 13.2 63.8 7.5 75.1 4.8 82.3 2.3 94 .6 102.1.5 114.3.5 350s.1 247.9 1.8 256c2.5 11.7 5.2 18.9 10.9 30.2 11.3 22.1 28.5 39.3 50.6 50.6 11.3 5.7 18.5 8.4 30.2 10.9 8.1 1.7 20.3 1.8 256 1.8s247.9-.1 256-1.8c11.7-2.5 18.9-5.2 30.2-10.9 22.1-11.3 39.3-28.5 50.6-50.6 5.7-11.3 8.4-18.5 10.9-30.2 1.7-8.1 1.8-20.3 1.8-256s-.1-247.9-1.8-256c-2.5-11.7-5.2-18.9-10.9-30.2C670.9 32.6 642.9 11 607 2.4 599.9.7 587.2.6 353.5.4 218.2.3 106.2.5 104.5.7zm315.3 153.6c47.4 9 75.3 30.5 85.6 65.9 5.1 17.8 5.6 43.1 1.1 60.3-2 7.5-7.9 20.3-12.2 26.4-8 11.3-21.9 22.8-36 30-3.5 1.7-6.3 3.5-6.3 3.9 0 .5 2.3 1.4 5.1 2 2.8.7 8.5 2.6 12.7 4.3 37.2 14.8 58.1 50.4 58.2 99 0 28.6-9 53.9-25.7 71.8-18.8 20.3-45.2 32.9-83.3 39.8-8.5 1.5-20.9 1.7-119.2 2l-109.8.4V151.9l110.8.4c95.5.3 111.8.6 119 2z"/>
+  <path d="M262 266.5v56.6l65.3-.4c57.2-.3 65.9-.5 70.7-2 15.8-4.8 28.7-14.9 34.4-27.1 4.4-9.2 5.6-15.3 5.6-28.4-.1-25.1-7.5-39.8-24.3-47.7-14.1-6.7-14.2-6.7-86.4-7.2l-65.3-.5v56.7zm0 171.5v64.1l71.3-.3c69.8-.3 71.4-.4 79-2.6 11.4-3.2 19.2-7.7 27.2-15.7 12.1-12 16.8-24.9 16.8-46 0-20.8-5.1-34.3-17.3-45.9-7.9-7.4-15.8-11.6-28.1-14.7-8.1-2.1-10.5-2.2-78.6-2.6l-70.3-.5V438z"/>
+</svg>
--- a/site/docs/4.1/assets/js/.eslintrc.json
+++ b/site/docs/4.1/assets/js/.eslintrc.json
@@ -0,0 +1,26 @@
+{
+  "env": {
+    "es6": false,
+    "jquery": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 5,
+    "sourceType": "script"
+  },
+  "extends": "../../../../../.eslintrc.json",
+  "rules": {
+    // Best Practices
+    "no-magic-numbers": "off",
+    "vars-on-top": "off",
+
+    // Stylistic Issues
+    "spaced-comment": "off",
+
+    // ECMAScript 6
+    "no-var": "off",
+    "object-shorthand": "off",
+    "prefer-arrow-callback": "off",
+    "prefer-template": "off",
+    "prefer-rest-params": "off"
+  }
+}
--- a/site/docs/4.1/assets/js/docs.min.js
+++ b/site/docs/4.1/assets/js/docs.min.js
--- a/site/docs/4.1/assets/js/src/application.js
+++ b/site/docs/4.1/assets/js/src/application.js
@@ -0,0 +1,112 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License. For
+ * details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+/* global ClipboardJS: false, anchors: false, Holder: false */
+
+(function ($) {
+  'use strict'
+
+  $(function () {
+    // Tooltip and popover demos
+    $('.tooltip-demo').tooltip({
+      selector: '[data-toggle="tooltip"]',
+      container: 'body'
+    })
+
+    $('[data-toggle="popover"]').popover()
+
+    // Demos within modals
+    $('.tooltip-test').tooltip()
+    $('.popover-test').popover()
+
+    // Indeterminate checkbox example
+    $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
+
+    // Disable empty links in docs examples
+    $('.bd-content [href="#"]').click(function (e) {
+      e.preventDefault()
+    })
+
+    // Modal relatedTarget demo
+    $('#exampleModal').on('show.bs.modal', function (event) {
+      var $button = $(event.relatedTarget)      // Button that triggered the modal
+      var recipient = $button.data('whatever')  // Extract info from data-* attributes
+      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+      var $modal = $(this)
+      $modal.find('.modal-title').text('New message to ' + recipient)
+      $modal.find('.modal-body input').val(recipient)
+    })
+
+    // Activate animated progress bar
+    $('.bd-toggle-animated-progress').on('click', function () {
+      $(this).siblings('.progress').find('.progress-bar-striped').toggleClass('progress-bar-animated')
+    })
+
+    // Insert copy to clipboard button before .highlight
+    $('figure.highlight, div.highlight').each(function () {
+      var btnHtml = '<div class="bd-clipboard"><button class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
+      $(this).before(btnHtml)
+      $('.btn-clipboard')
+        .tooltip()
+        .on('mouseleave', function () {
+          // Explicitly hide tooltip, since after clicking it remains
+          // focused (as it's a button), so tooltip would otherwise
+          // remain visible until focus is moved away
+          $(this).tooltip('hide')
+        })
+    })
+
+    var clipboard = new ClipboardJS('.btn-clipboard', {
+      target: function (trigger) {
+        return trigger.parentNode.nextElementSibling
+      }
+    })
+
+    clipboard.on('success', function (e) {
+      $(e.trigger)
+        .attr('title', 'Copied!')
+        .tooltip('_fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('_fixTitle')
+
+      e.clearSelection()
+    })
+
+    clipboard.on('error', function (e) {
+      var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
+      var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
+
+      $(e.trigger)
+        .attr('title', fallbackMsg)
+        .tooltip('_fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('_fixTitle')
+    })
+
+    anchors.options = {
+      icon: '#'
+    }
+    anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
+    $('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5').wrapInner('<div></div>')
+
+    // Holder
+    Holder.addTheme('gray', {
+      bg: '#777',
+      fg: 'rgba(255,255,255,.75)',
+      font: 'Helvetica',
+      fontweight: 'normal'
+    })
+  })
+}(jQuery))
--- a/site/docs/4.1/assets/js/src/ie-emulation-modes-warning.js
+++ b/site/docs/4.1/assets/js/src/ie-emulation-modes-warning.js
@@ -0,0 +1,47 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+// Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
+(function () {
+  'use strict'
+
+  function emulatedIEMajorVersion() {
+    var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent)
+    if (groups === null) {
+      return null
+    }
+    var ieVersionNum = parseInt(groups[1], 10)
+    var ieMajorVersion = Math.floor(ieVersionNum)
+    return ieMajorVersion
+  }
+
+  function actualNonEmulatedIEMajorVersion() {
+    // Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
+    // IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx
+    // @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx
+    var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // eslint-disable-line no-new-func
+    if (typeof jscriptVersion === 'undefined') {
+      return 11 // IE11+ not in emulation mode
+    }
+    if (jscriptVersion < 9) {
+      return 8 // IE8 (or lower; haven't tested on IE<8)
+    }
+    return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode
+  }
+
+  var ua = window.navigator.userAgent
+  if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) {
+    return // Opera, which might pretend to be IE
+  }
+  var emulated = emulatedIEMajorVersion()
+  if (emulated === null) {
+    return // Not IE
+  }
+  var nonEmulated = actualNonEmulatedIEMajorVersion()
+
+  if (emulated !== nonEmulated) {
+    // eslint-disable-next-line no-alert
+    window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
+  }
+}())
--- a/site/docs/4.1/assets/js/src/pwa.js
+++ b/site/docs/4.1/assets/js/src/pwa.js
@@ -0,0 +1,21 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/* eslint no-console:off */
+
+(function () {
+  'use strict'
+
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function () {
+      navigator.serviceWorker.register('/sw.js').then(function (registration) { // eslint-disable-line compat/compat
+        console.log('ServiceWorker registration successful with scope: ', registration.scope)
+      }).catch(function (err) {
+        console.log('ServiceWorker registration failed: ', err)
+      })
+    })
+  } else {
+    console.log('Service workers are not supported.')
+  }
+}())
--- a/site/docs/4.1/assets/js/src/search.js
+++ b/site/docs/4.1/assets/js/src/search.js
@@ -0,0 +1,42 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+(function () {
+  'use strict'
+
+  if (!window.docsearch) {
+    return
+  }
+
+  var inputElement = document.getElementById('search-input')
+  var siteDocsVersion = inputElement.getAttribute('data-docs-version')
+
+  window.docsearch({
+    apiKey: '5990ad008512000bba2cf951ccf0332f',
+    indexName: 'bootstrap',
+    inputSelector: '#search-input',
+    algoliaOptions: {
+      facetFilters: ['version:' + siteDocsVersion]
+    },
+    handleSelected: function (input, event, suggestion) {
+      var url = suggestion.url
+      url = suggestion.isLvl1 ? url.split('#')[0] : url
+      // If it's a title we remove the anchor so it does not jump.
+      window.location.href = url
+    },
+    transformData: function (hits) {
+      return hits.map(function (hit) {
+        // When in production, return the result as is,
+        // otherwise remove our url from it.
+        var siteurl = inputElement.getAttribute('data-siteurl')
+        var urlRE = /^https?:\/\/getbootstrap\.com/
+
+        hit.url = siteurl.match(urlRE) ? hit.url : hit.url.replace(urlRE, '')
+
+        return hit
+      })
+    },
+    debug: false // Set debug to true if you want to inspect the dropdown
+  })
+}())
--- a/site/docs/4.1/assets/js/vendor/anchor.min.js
+++ b/site/docs/4.1/assets/js/vendor/anchor.min.js
--- a/site/docs/4.1/assets/js/vendor/clipboard.min.js
+++ b/site/docs/4.1/assets/js/vendor/clipboard.min.js
--- a/site/docs/4.1/assets/js/vendor/holder.min.js
+++ b/site/docs/4.1/assets/js/vendor/holder.min.js
--- a/site/docs/4.1/assets/js/vendor/jquery-slim.min.js
+++ b/site/docs/4.1/assets/js/vendor/jquery-slim.min.js
--- a/site/docs/4.1/assets/js/vendor/popper.min.js
+++ b/site/docs/4.1/assets/js/vendor/popper.min.js
--- a/site/docs/4.1/assets/scss/_ads.scss
+++ b/site/docs/4.1/assets/scss/_ads.scss
@@ -0,0 +1,38 @@
+// stylelint-disable declaration-no-important, selector-max-id
+
+//
+// Carbon ads
+//
+
+#carbonads {
+  position: static;
+  display: block;
+  max-width: 400px;
+  padding: 15px 15px 15px 160px;
+  margin: 2rem 0;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: left;
+  background-color: rgba(0, 0, 0, .05);
+
+  a {
+    color: #333;
+    text-decoration: none;
+  }
+
+  @include media-breakpoint-up(sm) {
+    max-width: 330px;
+    border-radius: 4px;
+  }
+}
+
+.carbon-img {
+  float: left;
+  margin-left: -145px;
+}
+
+.carbon-poweredby {
+  display: block;
+  color: #777 !important;
+}
--- a/site/docs/4.1/assets/scss/_algolia.scss
+++ b/site/docs/4.1/assets/scss/_algolia.scss
@@ -0,0 +1,141 @@
+// stylelint-disable declaration-no-important
+
+// Docsearch overrides
+//
+// `!important` indicates overridden properties.
+.algolia-autocomplete {
+  display: block !important;
+  flex: 1;
+
+  // Menu container
+  .ds-dropdown-menu {
+    width: 100%;
+    min-width: 0 !important;
+    max-width: none !important;
+    padding: .75rem 0 !important;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, .1);
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
+
+    @include media-breakpoint-up(md) {
+      width: 175%;
+    }
+
+    // Caret
+    &::before {
+      display: none !important;
+    }
+
+    [class^="ds-dataset-"] {
+      padding: 0 !important;
+      overflow: visible !important;
+      background-color: transparent !important;
+      border: 0 !important;
+    }
+
+    .ds-suggestions {
+      margin-top: 0 !important;
+    }
+  }
+
+  .algolia-docsearch-suggestion {
+    padding: 0 !important;
+    overflow: visible !important;
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    padding: .125rem 1rem !important;
+    margin-top: 0 !important;
+    font-size: .875rem !important;
+    font-weight: 500 !important;
+    color: $bd-purple-bright !important;
+    border-bottom: 0 !important;
+  }
+
+  .algolia-docsearch-suggestion--wrapper {
+    float: none !important;
+    padding-top: 0 !important;
+  }
+
+  // Section header
+  .algolia-docsearch-suggestion--subcategory-column {
+    float: none !important;
+    width: auto !important;
+    padding: 0 !important;
+    text-align: left !important;
+  }
+
+  .algolia-docsearch-suggestion--content {
+    float: none !important;
+    width: auto !important;
+    padding: 0 !important;
+
+    // Vertical divider between column header and content
+    &::before {
+      display: none !important;
+    }
+  }
+
+  .ds-suggestion {
+    &:not(:first-child) {
+      .algolia-docsearch-suggestion--category-header {
+        padding-top: .75rem !important;
+        margin-top: .75rem !important;
+        border-top: 1px solid rgba(0, 0, 0, .1);
+      }
+    }
+
+    .algolia-docsearch-suggestion--subcategory-column {
+      display: none !important;
+    }
+  }
+
+  .algolia-docsearch-suggestion--title {
+    display: block;
+    padding: .25rem 1rem !important;
+    margin-bottom: 0 !important;
+    font-size: .875rem !important;
+    font-weight: 400 !important;
+  }
+
+  .algolia-docsearch-suggestion--text {
+    padding: 0 1rem .5rem !important;
+    margin-top: -.25rem;
+    font-size: .875rem !important;
+    font-weight: 400;
+    line-height: 1.25 !important;
+  }
+
+  .algolia-docsearch-footer {
+    float: none !important;
+    width: auto !important;
+    height: auto !important;
+    padding: .75rem 1rem 0;
+    font-size: .75rem !important;
+    line-height: 1 !important;
+    color: #767676 !important;
+    border-top: 1px solid rgba(0, 0, 0, .1);
+  }
+
+  .algolia-docsearch-footer--logo {
+    display: inline !important;
+    overflow: visible !important;
+    color: inherit !important;
+    text-indent: 0 !important;
+    background: none !important;
+  }
+
+  .algolia-docsearch-suggestion--highlight {
+    color: #5f2dab;
+    background-color: rgba(154, 132, 187, .12);
+  }
+
+  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+    box-shadow: inset 0 -2px 0 0 rgba(95, 45, 171, .5) !important;
+  }
+
+  .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
+    background-color: rgba(208, 189, 236, .15) !important;
+  }
+}
--- a/site/docs/4.1/assets/scss/_anchor.scss
+++ b/site/docs/4.1/assets/scss/_anchor.scss
@@ -0,0 +1,10 @@
+.anchorjs-link {
+  font-weight: 400;
+  color: rgba($link-color, .5);
+  transition: color .16s linear;
+
+  &:hover {
+    color: $link-color;
+    text-decoration: none;
+  }
+}
--- a/site/docs/4.1/assets/scss/_brand.scss
+++ b/site/docs/4.1/assets/scss/_brand.scss
@@ -0,0 +1,110 @@
+// stylelint-disable no-duplicate-selectors
+
+//
+// Brand guidelines
+//
+
+// Logo series wrapper
+.bd-brand-logos {
+  display: table;
+  width: 100%;
+  margin-bottom: 1rem;
+  overflow: hidden;
+  color: #563d7c;
+  background-color: #f9f9f9;
+  border-radius: .25rem;
+}
+
+// Individual items
+.bd-brand-item {
+  padding: 4rem 0;
+  text-align: center;
+}
+.bd-brand-item + .bd-brand-item {
+  border-top: 1px solid #fff;
+}
+.bd-brand-logos .inverse {
+  color: #fff;
+  background-color: #563d7c;
+}
+
+// Heading content within
+.bd-brand-item h1,
+.bd-brand-item h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.bd-brand-item .bd-booticon {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// Make the icons stand out on what is/isn't okay
+// .bd-brand-item .glyphicon {
+//   width: 30px;
+//   height: 30px;
+//   margin: 10px auto -10px;
+//   line-height: 30px;
+//   color: #fff;
+//   border-radius: 50%;
+// }
+// .bd-brand-item .glyphicon-ok {
+//   background-color: #5cb85c;
+// }
+// .bd-brand-item .glyphicon-remove {
+//   background-color: #d9534f;
+// }
+
+@media (min-width: 768px) {
+  .bd-brand-item {
+    display: table-cell;
+    width: 1%;
+  }
+  .bd-brand-item + .bd-brand-item {
+    border-top: 0;
+    border-left: 1px solid #fff;
+  }
+  .bd-brand-item h1 {
+    font-size: 4rem;
+  }
+}
+
+
+//
+// Color swatches
+//
+
+.color-swatches {
+  margin: 0 -5px;
+  overflow: hidden; // clearfix
+}
+
+.color-swatch {
+  float: left;
+  width: 4rem;
+  height: 4rem;
+  margin-right: .25rem;
+  margin-left: .25rem;
+  border-radius: .25rem;
+
+  @media (min-width: 768px) {
+    width: 6rem;
+    height: 6rem;
+  }
+}
+
+// Docs colors
+.color-swatches {
+  .bd-purple {
+    background-color: $bd-purple;
+  }
+  .bd-purple-light {
+    background-color: $bd-purple-light;
+  }
+  .bd-purple-lighter {
+    background-color: #e5e1ea;
+  }
+  .bd-gray {
+    background-color: #f9f9f9;
+  }
+}
--- a/site/docs/4.1/assets/scss/_browser-bugs.scss
+++ b/site/docs/4.1/assets/scss/_browser-bugs.scss
@@ -0,0 +1,12 @@
+// Wall of Browser Bugs
+//
+// Better display for the responsive table on the Wall of Browser Bugs.
+
+.bd-browser-bugs {
+  td p {
+    margin-bottom: 0;
+  }
+  th:first-child {
+    width: 18%;
+  }
+}
--- a/site/docs/4.1/assets/scss/_buttons.scss
+++ b/site/docs/4.1/assets/scss/_buttons.scss
@@ -0,0 +1,37 @@
+// Buttons
+//
+// Custom buttons for the docs.
+
+.btn-bd-primary {
+  font-weight: 500;
+  color: $bd-purple-bright;
+  border-color: $bd-purple-bright;
+
+  &:hover,
+  &:active {
+    color: #fff;
+    background-color: $bd-purple-bright;
+    border-color: $bd-purple-bright;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+}
+
+.btn-bd-download {
+  font-weight: 500;
+  color: $bd-download;
+  border-color: $bd-download;
+
+  &:hover,
+  &:active {
+    color: $bd-dark;
+    background-color: $bd-download;
+    border-color: $bd-download;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bd-download, .25);
+  }
+}
--- a/site/docs/4.1/assets/scss/_callouts.scss
+++ b/site/docs/4.1/assets/scss/_callouts.scss
@@ -0,0 +1,40 @@
+//
+// Callouts
+//
+
+.bd-callout {
+  padding: 1.25rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  border: 1px solid #eee;
+  border-left-width: .25rem;
+  border-radius: .25rem;
+}
+
+.bd-callout h4 {
+  margin-top: 0;
+  margin-bottom: .25rem;
+}
+
+.bd-callout p:last-child {
+  margin-bottom: 0;
+}
+
+.bd-callout code {
+  border-radius: .25rem;
+}
+
+.bd-callout + .bd-callout {
+  margin-top: -.25rem;
+}
+
+// Variations
+@mixin bs-callout-variant($color) {
+  border-left-color: $color;
+
+  h4 { color: $color; }
+}
+
+.bd-callout-info { @include bs-callout-variant($bd-info); }
+.bd-callout-warning { @include bs-callout-variant($bd-warning); }
+.bd-callout-danger { @include bs-callout-variant($bd-danger); }
--- a/site/docs/4.1/assets/scss/_clipboard-js.scss
+++ b/site/docs/4.1/assets/scss/_clipboard-js.scss
@@ -0,0 +1,39 @@
+// clipboard.js
+//
+// JS-based `Copy` buttons for code snippets.
+
+.bd-clipboard {
+  position: relative;
+  display: none;
+  float: right;
+
+  + .highlight {
+    margin-top: 0;
+  }
+}
+
+.btn-clipboard {
+  position: absolute;
+  top: .5rem;
+  right: .5rem;
+  z-index: 10;
+  display: block;
+  padding: .25rem .5rem;
+  font-size: 75%;
+  color: #818a91;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: .25rem;
+
+  &:hover {
+    color: #fff;
+    background-color: #027de7;
+  }
+}
+
+@media (min-width: 768px) {
+  .bd-clipboard {
+    display: block;
+  }
+}
--- a/site/docs/4.1/assets/scss/_colors.scss
+++ b/site/docs/4.1/assets/scss/_colors.scss
@@ -0,0 +1,24 @@
+//
+// Docs color palette classes
+//
+
+@each $color, $value in $colors {
+  .swatch-#{$color} {
+    color: color-yiq($value);
+    background-color: #{$value};
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .swatch-#{$color} {
+    color: color-yiq($value);
+    background-color: #{$value};
+  }
+}
+
+@each $color, $value in $grays {
+  .swatch-#{$color} {
+    color: color-yiq($value);
+    background-color: #{$value};
+  }
+}
--- a/site/docs/4.1/assets/scss/_component-examples.scss
+++ b/site/docs/4.1/assets/scss/_component-examples.scss
@@ -0,0 +1,411 @@
+// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type
+
+//
+// Grid examples
+//
+
+.bd-example-row {
+  .row {
+    > .col,
+    > [class^="col-"] {
+      padding-top: .75rem;
+      padding-bottom: .75rem;
+      background-color: rgba(86, 61, 124, .15);
+      border: 1px solid rgba(86, 61, 124, .2);
+    }
+  }
+
+  .row + .row {
+    margin-top: 1rem;
+  }
+
+  .flex-items-top,
+  .flex-items-middle,
+  .flex-items-bottom {
+    min-height: 6rem;
+    background-color: rgba(255, 0, 0, .1);
+  }
+}
+
+.bd-example-row-flex-cols .row {
+  min-height: 10rem;
+  background-color: rgba(255, 0, 0, .1);
+}
+
+.bd-highlight {
+  background-color: rgba($bd-purple, .15);
+  border: 1px solid rgba($bd-purple, .15);
+}
+
+// Grid mixins
+.example-container {
+  width: 800px;
+  @include make-container();
+}
+
+.example-row {
+  @include make-row();
+}
+
+.example-content-main {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(8);
+  }
+}
+
+.example-content-secondary {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(4);
+  }
+}
+
+
+//
+// Container illustrations
+//
+
+.bd-example-container {
+  min-width: 16rem;
+  max-width: 25rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.bd-example-container-header {
+  height: 3rem;
+  margin-bottom: .5rem;
+  background-color: lighten($blue, 50%);
+  border-radius: .25rem;
+}
+
+.bd-example-container-sidebar {
+  float: right;
+  width: 4rem;
+  height: 8rem;
+  background-color: lighten($blue, 25%);
+  border-radius: .25rem;
+}
+
+.bd-example-container-body {
+  height: 8rem;
+  margin-right: 4.5rem;
+  background-color: lighten($bd-purple, 25%);
+  border-radius: .25rem;
+}
+
+.bd-example-container-fluid {
+  max-width: none;
+}
+
+
+//
+// Docs examples
+//
+
+.bd-example {
+  position: relative;
+  padding: 1rem;
+  margin: 1rem (-$grid-gutter-width / 2) 0;
+  border: solid $gray-100;
+  border-width: .2rem 0 0;
+  @include clearfix();
+
+  @include media-breakpoint-up(sm) {
+    padding: 1.5rem;
+    margin-right: 0;
+    margin-left: 0;
+    border-width: .2rem;
+  }
+
+  + .highlight,
+  + .clipboard + .highlight {
+    margin-top: 0;
+  }
+
+  + p {
+    margin-top: 2rem;
+  }
+
+  .pos-f-t {
+    position: relative;
+    margin: -1rem;
+
+    @include media-breakpoint-up(sm) {
+      margin: -1.5rem;
+    }
+  }
+
+  .custom-file-input:lang(es) ~ .custom-file-label::after {
+    content: "Elegir";
+  }
+
+  > .form-control {
+    + .form-control {
+      margin-top: .5rem;
+    }
+  }
+
+  > .nav + .nav,
+  > .alert + .alert,
+  > .navbar + .navbar,
+  > .progress + .progress,
+  > .progress + .btn {
+    margin-top: 1rem;
+  }
+
+  > .dropdown-menu:first-child {
+    position: static;
+    display: block;
+  }
+
+  > .form-group:last-child {
+    margin-bottom: 0;
+  }
+
+  > .close {
+    float: none;
+  }
+}
+
+// Typography
+.bd-example-type {
+  .table {
+    .type-info {
+      color: #999;
+      vertical-align: middle;
+    }
+    td {
+      padding: 1rem 0;
+      border-color: #eee;
+    }
+    tr:first-child td {
+      border-top: 0;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+// Contextual background colors
+.bd-example-bg-classes p {
+  padding: 1rem;
+}
+
+// Images
+.bd-example > img {
+  + img {
+    margin-left: .5rem;
+  }
+}
+
+// Buttons
+.bd-example {
+  > .btn-group {
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+  }
+  > .btn-toolbar + .btn-toolbar {
+    margin-top: .5rem;
+  }
+}
+
+// Forms
+.bd-example-control-sizing select,
+.bd-example-control-sizing input[type="text"] + input[type="text"] {
+  margin-top: .5rem;
+}
+.bd-example-form .input-group {
+  margin-bottom: .5rem;
+}
+.bd-example > textarea.form-control {
+  resize: vertical;
+}
+
+// List groups
+.bd-example > .list-group {
+  max-width: 400px;
+}
+
+// Navbars
+.bd-example {
+  .fixed-top,
+  .sticky-top {
+    position: static;
+    margin: -1rem -1rem 1rem;
+  }
+  .fixed-bottom {
+    position: static;
+    margin: 1rem -1rem -1rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    .fixed-top,
+    .sticky-top {
+      margin: -1.5rem -1.5rem 1rem;
+    }
+    .fixed-bottom {
+      margin: 1rem -1.5rem -1.5rem;
+    }
+  }
+}
+
+// Pagination
+.bd-example .pagination {
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+}
+
+// Example modals
+.modal {
+  z-index: 1072;
+
+  .tooltip,
+  .popover {
+    z-index: 1073;
+  }
+}
+
+.modal-backdrop {
+  z-index: 1071;
+}
+
+.bd-example-modal {
+  background-color: #fafafa;
+
+  .modal {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    z-index: 1;
+    display: block;
+  }
+
+  .modal-dialog {
+    left: auto;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+// Example tabbable tabs
+.bd-example-tabs .nav-tabs {
+  margin-bottom: 1rem;
+}
+
+// Popovers
+.bd-example-popover-static {
+  padding-bottom: 1.5rem;
+  background-color: #f9f9f9;
+
+  .popover {
+    position: relative;
+    display: block;
+    float: left;
+    width: 260px;
+    margin: 1.25rem;
+  }
+}
+
+// Tooltips
+.tooltip-demo a {
+  white-space: nowrap;
+}
+
+.bd-example-tooltip-static .tooltip {
+  position: relative;
+  display: inline-block;
+  margin: 10px 20px;
+  opacity: 1;
+}
+
+// Scrollspy demo on fixed height div
+.scrollspy-example {
+  position: relative;
+  height: 200px;
+  margin-top: .5rem;
+  overflow: auto;
+}
+
+.scrollspy-example-2 {
+  position: relative;
+  height: 350px;
+  overflow: auto;
+}
+
+.bd-example-border-utils {
+  [class^="border"] {
+    display: inline-block;
+    width: 5rem;
+    height: 5rem;
+    margin: .25rem;
+    background-color: #f5f5f5;
+  }
+}
+
+.bd-example-border-utils-0 {
+  [class^="border"] {
+    border: 1px solid $border-color;
+  }
+}
+
+//
+// Code snippets
+//
+
+.highlight {
+  padding: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  background-color: $gray-100;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  @include media-breakpoint-up(sm) {
+    padding: 1.5rem;
+  }
+}
+
+.bd-content .highlight {
+  margin-right: (-$grid-gutter-width / 2);
+  margin-left: (-$grid-gutter-width / 2);
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+.highlight {
+  pre {
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    background-color: transparent;
+    border: 0;
+  }
+  pre code {
+    font-size: inherit;
+    color: $gray-900; // Effectively the base text color
+  }
+}
--- a/site/docs/4.1/assets/scss/_content.scss
+++ b/site/docs/4.1/assets/scss/_content.scss
@@ -0,0 +1,119 @@
+// stylelint-disable no-duplicate-selectors, selector-max-combinators, selector-max-compound-selectors, selector-max-type, selector-no-qualifying-type
+
+//
+// Automatically style Markdown-based tables like a Bootstrap `.table`.
+//
+
+.bd-content {
+  order: 1;
+
+  // Hack the sticky header
+  > h2[id],
+  > h3[id],
+  > h4[id] {
+    pointer-events: none;
+
+    > div,
+    > a {
+      pointer-events: auto;
+    }
+
+    &::before {
+      display: block;
+      height: 6rem;
+      margin-top: -6rem;
+      visibility: hidden;
+      content: "";
+    }
+  }
+
+  > table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-down(md) {
+      display: block;
+      overflow-x: auto;
+      -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+
+      &.table-bordered {
+        border: 0;
+      }
+    }
+
+    // Cells
+    > thead,
+    > tbody,
+    > tfoot {
+      > tr {
+        > th,
+        > td {
+          padding: $table-cell-padding;
+          vertical-align: top;
+          border: 1px solid $table-border-color;
+
+          > p:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    // Prevent breaking of code (e.g., Grunt tasks list)
+    td:first-child > code {
+      white-space: nowrap;
+    }
+  }
+}
+
+//
+// Docs sections
+//
+
+.bd-content {
+  > h2:not(:first-child) {
+    margin-top: 3rem;
+  }
+
+  > h3 {
+    margin-top: 1.5rem;
+  }
+
+  > ul li,
+  > ol li {
+    margin-bottom: .25rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    > ul,
+    > ol,
+    > p {
+      max-width: 80%;
+    }
+  }
+}
+
+.bd-title {
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+  font-weight: 300;
+
+  @include media-breakpoint-up(sm) {
+    font-size: 3rem;
+  }
+}
+
+.bd-lead {
+  font-size: 1.125rem;
+  font-weight: 300;
+
+  @include media-breakpoint-up(sm) {
+    max-width: 80%;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+  }
+}
+
+.bd-text-purple { color: $bd-purple; }
+.bd-text-purple-bright { color: $bd-purple-bright; }
--- a/site/docs/4.1/assets/scss/_examples.scss
+++ b/site/docs/4.1/assets/scss/_examples.scss
@@ -0,0 +1,24 @@
+//
+// Examples
+//
+
+.bd-examples .img-thumbnail {
+  margin-bottom: .75rem;
+}
+.bd-examples h4 {
+  margin-bottom: .25rem;
+}
+.bd-examples p {
+  margin-bottom: 1.25rem;
+}
+
+@media (max-width: 480px) {
+  .bd-examples {
+    margin-right: -.75rem;
+    margin-left: -.75rem;
+  }
+  .bd-examples > [class^="col-"] {
+    padding-right: .75rem;
+    padding-left: .75rem;
+  }
+}
--- a/site/docs/4.1/assets/scss/_footer.scss
+++ b/site/docs/4.1/assets/scss/_footer.scss
@@ -0,0 +1,40 @@
+//
+// Footer
+//
+
+.bd-footer {
+  font-size: 85%;
+  text-align: center;
+  background-color: #f7f7f7;
+
+  a {
+    font-weight: 500;
+    color: $gray-700;
+
+    &:hover,
+    &:focus {
+      color: $link-color;
+    }
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  @include media-breakpoint-up(sm) {
+    text-align: left;
+  }
+}
+
+.bd-footer-links {
+  padding-left: 0;
+  margin-bottom: 1rem;
+
+  li {
+    display: inline-block;
+
+    + li {
+      margin-left: 1rem;
+    }
+  }
+}
--- a/site/docs/4.1/assets/scss/_masthead.scss
+++ b/site/docs/4.1/assets/scss/_masthead.scss
@@ -0,0 +1,56 @@
+// stylelint-disable declaration-no-important
+
+.bd-masthead {
+  position: relative;
+  padding: 3rem ($grid-gutter-width / 2);
+  // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
+
+  h1 {
+    line-height: 1;
+  }
+
+  .btn {
+    width: 100%;
+    padding: .8rem 2rem;
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+
+  .carbonad {
+    margin-top: 0 !important;
+    margin-bottom: -3rem !important;
+  }
+
+  @include media-breakpoint-up(sm) {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+
+    .carbonad {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    h1 {
+      font-size: 4rem;
+    }
+
+    .carbonad {
+      margin-top: 3rem !important;
+    }
+  }
+}
+
+.half-rule {
+  width: 6rem;
+  margin: 2.5rem 0;
+}
+
+.masthead-followup {
+  .bd-clipboard { display: none; }
+
+  .highlight {
+    padding: .5rem 0;
+    background-color: transparent;
+  }
+}
--- a/site/docs/4.1/assets/scss/_nav.scss
+++ b/site/docs/4.1/assets/scss/_nav.scss
@@ -0,0 +1,76 @@
+//
+// Main navbar
+//
+
+.bd-navbar {
+  min-height: 4rem;
+  background-color: $bd-purple;
+  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
+
+  @include media-breakpoint-down(md) {
+    padding-right: .5rem;
+    padding-left: .5rem;
+
+    .navbar-nav-scroll {
+      max-width: 100%;
+      height: 2.5rem;
+      margin-top: .25rem;
+      overflow: hidden;
+      font-size: .875rem;
+
+      .navbar-nav {
+        padding-bottom: 2rem;
+        overflow-x: auto;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    @supports (position: sticky) {
+      position: sticky;
+      top: 0;
+      z-index: 1071; // over everything in bootstrap
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      padding-right: .5rem;
+      padding-left: .5rem;
+      color: $bd-purple-light;
+
+      &.active,
+      &:hover {
+        color: #fff;
+        background-color: transparent;
+      }
+
+      &.active {
+        font-weight: 500;
+      }
+    }
+  }
+
+  .navbar-nav-svg {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: text-top;
+  }
+
+  .dropdown-menu {
+    font-size: .875rem;
+  }
+
+  .dropdown-item.active {
+    font-weight: 500;
+    color: $gray-900;
+    background-color: transparent;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: .4rem .6rem;
+    background-size: .75rem .75rem;
+  }
+}
--- a/site/docs/4.1/assets/scss/_sidebar.scss
+++ b/site/docs/4.1/assets/scss/_sidebar.scss
@@ -0,0 +1,166 @@
+// stylelint-disable declaration-no-important
+
+//
+// Right side table of contents
+//
+
+.bd-toc {
+  @supports (position: sticky) {
+    position: sticky;
+    top: 4rem;
+    height: calc(100vh - 4rem);
+    overflow-y: auto;
+  }
+  order: 2;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  font-size: .875rem;
+}
+
+.section-nav {
+  padding-left: 0;
+  border-left: 1px solid #eee;
+
+  ul {
+    padding-left: 1rem;
+
+    ul {
+      display: none;
+    }
+  }
+}
+
+.toc-entry {
+  display: block;
+
+  a {
+    display: block;
+    padding: .125rem 1.5rem;
+    color: #99979c;
+
+    &:hover {
+      color: $blue;
+      text-decoration: none;
+    }
+  }
+}
+
+//
+// Left side navigation
+//
+
+.bd-sidebar {
+  order: 0;
+  // background-color: #f5f2f9;
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+
+  @include media-breakpoint-up(md) {
+    @supports (position: sticky) {
+      position: sticky;
+      top: 4rem;
+      z-index: 1000;
+      height: calc(100vh - 4rem);
+    }
+    border-right: 1px solid rgba(0, 0, 0, .1);
+  }
+
+  @include media-breakpoint-up(xl) {
+    flex: 0 1 320px;
+  }
+}
+
+.bd-links {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  margin-right: -15px;
+  margin-left: -15px;
+
+  @include media-breakpoint-up(md) {
+    @supports (position: sticky) {
+      max-height: calc(100vh - 9rem);
+      overflow-y: auto;
+    }
+  }
+
+  // Override collapse behaviors
+  @include media-breakpoint-up(md) {
+    display: block !important;
+  }
+}
+
+.bd-search {
+  position: relative; // To contain the Algolia search
+  padding: 1rem 15px;
+  margin-right: -15px;
+  margin-left: -15px;
+  border-bottom: 1px solid rgba(0, 0, 0, .05);
+
+  .form-control:focus {
+    border-color: $bd-purple-bright;
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+}
+
+.bd-search-docs-toggle {
+  line-height: 1;
+  color: $gray-900;
+}
+
+.bd-sidenav {
+  display: none;
+}
+
+.bd-toc-link {
+  display: block;
+  padding: .25rem 1.5rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, .65);
+
+  &:hover {
+    color: rgba(0, 0, 0, .85);
+    text-decoration: none;
+  }
+}
+
+.bd-toc-item {
+  &.active {
+    margin-bottom: 1rem;
+
+    &:not(:first-child) {
+      margin-top: 1rem;
+    }
+
+    > .bd-toc-link {
+      color: rgba(0, 0, 0, .85);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    > .bd-sidenav {
+      display: block;
+    }
+  }
+}
+
+// All levels of nav
+.bd-sidebar .nav > li > a {
+  display: block;
+  padding: .25rem 1.5rem;
+  font-size: 90%;
+  color: rgba(0, 0, 0, .65);
+}
+
+.bd-sidebar .nav > li > a:hover {
+  color: rgba(0, 0, 0, .85);
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.bd-sidebar .nav > .active > a,
+.bd-sidebar .nav > .active:hover > a {
+  font-weight: 500;
+  color: rgba(0, 0, 0, .85);
+  background-color: transparent;
+}
--- a/site/docs/4.1/assets/scss/_skiplink.scss
+++ b/site/docs/4.1/assets/scss/_skiplink.scss
@@ -0,0 +1,14 @@
+// stylelint-disable selector-max-id
+
+#skippy {
+  display: block;
+  padding: 1em;
+  color: #fff;
+  background-color: $bd-purple;
+  outline: 0;
+
+  .skiplink-text {
+    padding: .5em;
+    outline: 1px dotted;
+  }
+}
--- a/site/docs/4.1/assets/scss/_syntax.scss
+++ b/site/docs/4.1/assets/scss/_syntax.scss
@@ -0,0 +1,78 @@
+// stylelint-disable declaration-block-single-line-max-declarations
+
+.hll { background-color: #ffc; }
+.c { color: #999; }
+.k { color: #069; }
+.o { color: #555; }
+.cm { color: #999; }
+.cp { color: #099; }
+.c1 { color: #999; }
+.cs { color: #999; }
+.gd { background-color: #fcc; border: 1px solid #c00; }
+.ge { font-style: italic; }
+.gr { color: #f00; }
+.gh { color: #030; }
+.gi { background-color: #cfc; border: 1px solid #0c0; }
+.go { color: #aaa; }
+.gp { color: #009; }
+.gu { color: #030; }
+.gt { color: #9c6; }
+.kc { color: #069; }
+.kd { color: #069; }
+.kn { color: #069; }
+.kp { color: #069; }
+.kr { color: #069; }
+.kt { color: #078; }
+.m { color: #f60; }
+.s { color: #d44950; }
+.na { color: #4f9fcf; }
+.nb { color: #366; }
+.nc { color: #0a8; }
+.no { color: #360; }
+.nd { color: #99f; }
+.ni { color: #999; }
+.ne { color: #c00; }
+.nf { color: #c0f; }
+.nl { color: #99f; }
+.nn { color: #0cf; }
+.nt { color: #2f6f9f; }
+.nv { color: #033; }
+.ow { color: #000; }
+.w { color: #bbb; }
+.mf { color: #f60; }
+.mh { color: #f60; }
+.mi { color: #f60; }
+.mo { color: #f60; }
+.sb { color: #c30; }
+.sc { color: #c30; }
+.sd { font-style: italic; color: #c30; }
+.s2 { color: #c30; }
+.se { color: #c30; }
+.sh { color: #c30; }
+.si { color: #a00; }
+.sx { color: #c30; }
+.sr { color: #3aa; }
+.s1 { color: #c30; }
+.ss { color: #fc3; }
+.bp { color: #366; }
+.vc { color: #033; }
+.vg { color: #033; }
+.vi { color: #033; }
+.il { color: #f60; }
+
+.css .o,
+.css .o + .nt,
+.css .nt + .nt { color: #999; }
+
+.language-bash::before,
+.language-sh::before {
+  color: #009;
+  content: "$ ";
+  user-select: none;
+}
+
+.language-powershell::before {
+  color: #009;
+  content: "PM> ";
+  user-select: none;
+}
--- a/site/docs/4.1/assets/scss/_variables.scss
+++ b/site/docs/4.1/assets/scss/_variables.scss
@@ -0,0 +1,9 @@
+// Local docs variables
+$bd-purple:        #563d7c !default;
+$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%) !default;
+$bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%) !default;
+$bd-dark:          #2a2730 !default;
+$bd-download:      #ffe484 !default;
+$bd-info:          #5bc0de !default;
+$bd-warning:       #f0ad4e !default;
+$bd-danger:        #d9534f !default;
--- a/site/docs/4.1/assets/scss/docs.scss
+++ b/site/docs/4.1/assets/scss/docs.scss
@@ -0,0 +1,52 @@
+/*!
+ * Bootstrap Docs (https://getbootstrap.com/)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License. For
+ * details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+// Dev notes
+//
+// Background information on nomenclature and architecture decisions here.
+//
+// - Bootstrap functions, variables, and mixins are included for easy reuse.
+//   Doing so gives us access to the same core utilities provided by Bootstrap.
+//   For example, consistent media queries through those mixins.
+//
+// - Bootstrap's **docs variables** are prefixed with `$bd-`.
+//   These custom colors avoid collision with the components Bootstrap provides.
+//
+// - Classes are prefixed with `.bd-`.
+//   These classes indicate custom-built or modified components for the design
+//   and layout of the Bootstrap docs. They are not included in our builds.
+//
+// Happy Bootstrapping!
+
+// Load Bootstrap variables and mixins
+@import "../../../../../scss/functions";
+@import "../../../../../scss/variables";
+@import "../../../../../scss/mixins";
+
+// Load docs components
+@import "variables";
+@import "nav";
+@import "masthead";
+@import "ads";
+@import "content";
+@import "skiplink";
+@import "sidebar";
+@import "footer";
+@import "component-examples";
+@import "buttons";
+@import "callouts";
+@import "examples";
+@import "browser-bugs";
+@import "brand";
+@import "colors";
+@import "clipboard-js";
+
+// Load docs dependencies
+@import "syntax";
+@import "anchor";
+@import "algolia";
--- a/site/docs/4.1/browser-bugs.md
+++ b/site/docs/4.1/browser-bugs.md
@@ -0,0 +1,64 @@
+---
+layout: docs
+title: Wall of browser bugs
+group: browser-bugs
+---
+
+Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.
+
+We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/browsers-devices/#supported-browsers).
+
+See also:
+
+* [Chromium issue 536263: [meta] Issues affecting Bootstrap](https://bugs.chromium.org/p/chromium/issues/detail?id=536263)
+* [Mozilla bug 1230801: Fix the issues that affect Bootstrap](https://bugzilla.mozilla.org/show_bug.cgi?id=1230801)
+* [WebKit bug 159753: [meta] Issues affecting Bootstrap](https://bugs.webkit.org/show_bug.cgi?id=159753)
+* [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o)
+
+<table class="bd-browser-bugs table table-bordered table-hover">
+  <thead>
+    <tr>
+      <th>Browser(s)</th>
+      <th>Summary of bug</th>
+      <th>Upstream bug(s)</th>
+      <th>Bootstrap issue(s)</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for bug in site.data.browser-bugs %}
+    <tr>
+      <td>{{ bug.browser }}</td>
+      <td>{{ bug.summary | markdownify }}</td>
+      <td>{% include bugify.html content=bug.upstream_bug %}</td>
+      <td>{% include bugify.html content=bug.origin %}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+
+# Most wanted features
+
+There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren't yet implemented in certain browsers, thus preventing us from taking advantage of them.
+
+We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.
+
+<table class="bd-browser-bugs table table-bordered table-hover">
+  <thead>
+    <tr>
+      <th>Browser(s)</th>
+      <th>Summary of feature</th>
+      <th>Upstream issue(s)</th>
+      <th>Bootstrap issue(s)</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for feat in site.data.browser-features %}
+    <tr>
+      <td>{{ feat.browser }}</td>
+      <td>{{ feat.summary | markdownify }}</td>
+      <td>{% include bugify.html content=feat.upstream_bug %}</td>
+      <td>{% include bugify.html content=feat.origin %}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
--- a/site/docs/4.1/components/alerts.md
+++ b/site/docs/4.1/components/alerts.md
@@ -0,0 +1,115 @@
+---
+layout: docs
+title: Alerts
+description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
+group: components
+toc: true
+---
+
+## Examples
+
+Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
+
+{% capture example %}
+{% for color in site.data.theme-colors %}
+<div class="alert alert-{{ color.name }}" role="alert">
+  A simple {{ color.name }} alert—check it out!
+</div>{% endfor %}
+{% endcapture %}
+{% include example.html content=example %}
+
+{% include callout-warning-color-assistive-technologies.md %}
+
+### Link color
+
+Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
+
+{% capture example %}
+{% for color in site.data.theme-colors %}
+<div class="alert alert-{{ color.name }}" role="alert">
+  A simple {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>{% endfor %}
+{% endcapture %}
+{% include example.html content=example %}
+
+### Additional content
+
+Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
+
+{% capture example %}
+<div class="alert alert-success" role="alert">
+  <h4 class="alert-heading">Well done!</h4>
+  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+  <hr>
+  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
+
+### Dismissing
+
+Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
+
+- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
+- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). The compiled version includes this.
+- Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button.
+- On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
+- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.
+
+You can see this in action with a live demo:
+
+{% capture example %}
+<div class="alert alert-warning alert-dismissible fade show" role="alert">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
+## JavaScript behavior
+
+### Triggers
+
+Enable dismissal of an alert via JavaScript:
+
+{% highlight js %}
+$('.alert').alert()
+{% endhighlight %}
+
+Or with `data` attributes on a button **within the alert**, as demonstrated above:
+
+{% highlight html %}
+<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+  <span aria-hidden="true">&times;</span>
+</button>
+{% endhighlight %}
+
+Note that closing an alert will remove it from the DOM.
+
+### Methods
+
+| Method | Description |
+| --- | --- |
+| `$().alert()` | Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) |
+| `$().alert('close')` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |
+| `$().alert('dispose')` | Destroys an element's alert. |
+
+{% highlight js %}$(".alert").alert('close'){% endhighlight %}
+
+### Events
+
+Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
+
+| Event | Description |
+| --- | --- |
+| `close.bs.alert` | This event fires immediately when the <code>close</code> instance method is called. |
+| `closed.bs.alert` | This event is fired when the alert has been closed (will wait for CSS transitions to complete). |
+
+{% highlight js %}
+$('#myAlert').on('closed.bs.alert', function () {
+  // do something…
+})
+{% endhighlight %}
--- a/site/docs/4.1/components/badge.md
+++ b/site/docs/4.1/components/badge.md
@@ -0,0 +1,82 @@
+---
+layout: docs
+title: Badges
+description: Documentation and examples for badges, our small count and labeling component.
+group: components
+toc: true
+---
+
+## Example
+
+Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
+
+<div class="bd-example">
+<div class="h1">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h2">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h3">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h4">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h5">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h6">Example heading <span class="badge badge-secondary">New</span></div>
+</div>
+
+{% highlight html %}
+<h1>Example heading <span class="badge badge-secondary">New</span></h1>
+<h2>Example heading <span class="badge badge-secondary">New</span></h2>
+<h3>Example heading <span class="badge badge-secondary">New</span></h3>
+<h4>Example heading <span class="badge badge-secondary">New</span></h4>
+<h5>Example heading <span class="badge badge-secondary">New</span></h5>
+<h6>Example heading <span class="badge badge-secondary">New</span></h6>
+{% endhighlight %}
+
+Badges can be used as part of links or buttons to provide a counter.
+
+{% capture example %}
+<button type="button" class="btn btn-primary">
+  Notifications <span class="badge badge-light">4</span>
+</button>
+{% endcapture %}
+{% include example.html content=example %}
+
+Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
+
+Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
+
+{% capture example %}
+<button type="button" class="btn btn-primary">
+  Profile <span class="badge badge-light">9</span>
+  <span class="sr-only">unread messages</span>
+</button>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Contextual variations
+
+Add any of the below mentioned modifier classes to change the appearance of a badge.
+
+{% capture example %}
+{% for color in site.data.theme-colors %}
+<span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
+{% endcapture %}
+{% include example.html content=example %}
+
+{% include callout-warning-color-assistive-technologies.md %}
+
+## Pill badges
+
+Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
+
+{% capture example %}
+{% for color in site.data.theme-colors %}
+<span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
+{% endcapture %}
+{% include example.html content=example %}
+
+## Links
+
+Using the contextual `.badge-*` classes on an `<a>` element quickly provide _actionable_ badges with hover and focus states.
+
+{% capture example %}
+{% for color in site.data.theme-colors %}
+<a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
+{% endcapture %}
+{% include example.html content=example %}
--- a/site/docs/4.1/components/breadcrumb.md
+++ b/site/docs/4.1/components/breadcrumb.md
@@ -0,0 +1,58 @@
+---
+layout: docs
+title: Breadcrumb
+description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
+group: components
+---
+
+## Example
+
+{% capture example %}
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item active" aria-current="page">Home</li>
+  </ol>
+</nav>
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="#">Home</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Library</li>
+  </ol>
+</nav>
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="#">Home</a></li>
+    <li class="breadcrumb-item"><a href="#">Library</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Data</li>
+  </ol>
+</nav>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Changing the separator
+
+Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by changing `$breadcrumb-divider`. The [quote](https://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method) function is needed to generate the quotes around a string, so if you want `>` as seperator, you can use this:
+
+```scss
+$breadcrumb-divider: quote(">");
+```
+
+It's also possible to use a **base64 embedded SVG icon**:
+
+```scss
+$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
+```
+
+The separator can be removed by setting `$breadcrumb-divider` to `none`:
+
+```scss
+$breadcrumb-divider: none;
+```
+
+## Accessibility
+
+Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
+
+For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
--- a/site/docs/4.1/components/button-group.md
+++ b/site/docs/4.1/components/button-group.md
@@ -0,0 +1,207 @@
+---
+layout: docs
+title: Button group
+description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
+group: components
+toc: true
+---
+
+## Basic example
+
+Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#button-plugin).
+
+{% capture example %}
+<div class="btn-group" role="group" aria-label="Basic example">
+  <button type="button" class="btn btn-secondary">Left</button>
+  <button type="button" class="btn btn-secondary">Middle</button>
+  <button type="button" class="btn btn-secondary">Right</button>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
+{% capture callout %}
+##### Ensure correct `role` and provide a label
+
+In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
+
+In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
+
+## Button toolbar
+
+Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
+
+{% capture example %}
+<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+  <div class="btn-group mr-2" role="group" aria-label="First group">
+    <button type="button" class="btn btn-secondary">1</button>
+    <button type="button" class="btn btn-secondary">2</button>
+    <button type="button" class="btn btn-secondary">3</button>
+    <button type="button" class="btn btn-secondary">4</button>
+  </div>
+  <div class="btn-group mr-2" role="group" aria-label="Second group">
+    <button type="button" class="btn btn-secondary">5</button>
+    <button type="button" class="btn btn-secondary">6</button>
+    <button type="button" class="btn btn-secondary">7</button>
+  </div>
+  <div class="btn-group" role="group" aria-label="Third group">
+    <button type="button" class="btn btn-secondary">8</button>
+  </div>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
+Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
+
+{% capture example %}
+<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
+  <div class="btn-group mr-2" role="group" aria-label="First group">
+    <button type="button" class="btn btn-secondary">1</button>
+    <button type="button" class="btn btn-secondary">2</button>
+    <button type="button" class="btn btn-secondary">3</button>
+    <button type="button" class="btn btn-secondary">4</button>
+  </div>
+  <div class="input-group">
+    <div class="input-group-prepend">
+      <div class="input-group-text" id="btnGroupAddon">@</div>
+    </div>
+    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
+  </div>
+</div>
+
+<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
+  <div class="btn-group" role="group" aria-label="First group">
+    <button type="button" class="btn btn-secondary">1</button>
+    <button type="button" class="btn btn-secondary">2</button>
+    <button type="button" class="btn btn-secondary">3</button>
+    <button type="button" class="btn btn-secondary">4</button>
+  </div>
+  <div class="input-group">
+    <div class="input-group-prepend">
+      <div class="input-group-text" id="btnGroupAddon2">@</div>
+    </div>
+    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
+  </div>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Sizing
+
+Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
+
+<div class="bd-example">
+  <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
+    <button type="button" class="btn btn-secondary">Left</button>
+    <button type="button" class="btn btn-secondary">Middle</button>
+    <button type="button" class="btn btn-secondary">Right</button>
+  </div>
+  <br>
+  <div class="btn-group" role="group" aria-label="Default button group">
+    <button type="button" class="btn btn-secondary">Left</button>
+    <button type="button" class="btn btn-secondary">Middle</button>
+    <button type="button" class="btn btn-secondary">Right</button>
+  </div>
+  <br>
+  <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+    <button type="button" class="btn btn-secondary">Left</button>
+    <button type="button" class="btn btn-secondary">Middle</button>
+    <button type="button" class="btn btn-secondary">Right</button>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
+<div class="btn-group" role="group" aria-label="...">...</div>
+<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
+{% endhighlight %}
+
+## Nesting
+
+Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
+
+{% capture example %}
+<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+  <button type="button" class="btn btn-secondary">1</button>
+  <button type="button" class="btn btn-secondary">2</button>
+
+  <div class="btn-group" role="group">
+    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Dropdown
+    </button>
+    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+      <a class="dropdown-item" href="#">Dropdown link</a>
+      <a class="dropdown-item" href="#">Dropdown link</a>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
+## Vertical variation
+
+Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
+
+<div class="bd-example">
+  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+  </div>
+</div>
+
+
+<div class="bd-example">
+  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <div class="btn-group" role="group">
+      <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        Dropdown
+      </button>
+      <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
+        <a class="dropdown-item" href="#">Dropdown link</a>
+        <a class="dropdown-item" href="#">Dropdown link</a>
+      </div>
+    </div>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <button type="button" class="btn btn-secondary">Button</button>
+    <div class="btn-group" role="group">
+      <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        Dropdown
+      </button>
+      <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
+        <a class="dropdown-item" href="#">Dropdown link</a>
+        <a class="dropdown-item" href="#">Dropdown link</a>
+      </div>
+    </div>
+    <div class="btn-group" role="group">
+      <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        Dropdown
+      </button>
+      <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
+        <a class="dropdown-item" href="#">Dropdown link</a>
+        <a class="dropdown-item" href="#">Dropdown link</a>
+      </div>
+    </div>
+    <div class="btn-group" role="group">
+      <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        Dropdown
+      </button>
+      <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
+        <a class="dropdown-item" href="#">Dropdown link</a>
+        <a class="dropdown-item" href="#">Dropdown link</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="btn-group-vertical">
+  ...
+</div>
+{% endhighlight %}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>`
				`@@ -0,0 +1 @@`
				<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>
				`@@ -0,0 +1 @@`
				`<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>`
				`@@ -0,0 +1 @@`
				`<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>`