-
-
-
- {{ color.name | capitalize }}
-
-
- Base
- {{ color.hex }}
-
+
+
+
+
+
+ {{ color.name | capitalize }}
+
+
+ Base
+ {{ color.hex }}
+
- {% for level in color.levels %}
+ {% for level in color.levels %}
-
- {{ level.name | capitalize }}
- {{ level.hex }}
-
+
+ {{ level.name | capitalize }}
+ {{ level.hex }}
+
- {% endfor %}
+ {% endfor %}
-
+
{% endfor %}
diff --git a/docs/4.1/layout/grid.md b/docs/4.1/layout/grid.md
index 5d341b68a..b8db13bf5 100644
--- a/docs/4.1/layout/grid.md
+++ b/docs/4.1/layout/grid.md
@@ -3,6 +3,7 @@ layout: docs
title: Grid system
description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
group: layout
+redirect_from: "/docs/4.1/layout/"
toc: true
---
diff --git a/docs/4.1/layout/overview.md b/docs/4.1/layout/overview.md
deleted file mode 100644
index 0b2f44d33..000000000
--- a/docs/4.1/layout/overview.md
+++ /dev/null
@@ -1,178 +0,0 @@
----
-layout: docs
-title: Overview
-description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
-group: layout
-redirect_from: "/docs/4.1/layout/"
-toc: true
----
-
-## Containers
-
-Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time).
-
-While containers *can* be nested, most layouts do not require a nested container.
-
-
-
-{% highlight html %}
-
-
-
-{% endhighlight %}
-
-Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
-
-
-
-{% highlight html %}
-
- ...
-
-{% endhighlight %}
-
-
-## Responsive breakpoints
-
-Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
-
-Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
-
-{% highlight scss %}
-// Extra small devices (portrait phones, less than 576px)
-// No media query since this is the default in Bootstrap
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) { ... }
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) { ... }
-
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) { ... }
-
-// Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) { ... }
-{% endhighlight %}
-
-Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
-
-{% highlight scss %}
-@include media-breakpoint-up(xs) { ... }
-@include media-breakpoint-up(sm) { ... }
-@include media-breakpoint-up(md) { ... }
-@include media-breakpoint-up(lg) { ... }
-@include media-breakpoint-up(xl) { ... }
-
-// Example usage:
-@include media-breakpoint-up(sm) {
- .some-class {
- display: block;
- }
-}
-{% endhighlight %}
-
-We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
-
-{% highlight scss %}
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) { ... }
-
-// Small devices (landscape phones, less than 768px)
-@media (max-width: 767.98px) { ... }
-
-// Medium devices (tablets, less than 992px)
-@media (max-width: 991.98px) { ... }
-
-// Large devices (desktops, less than 1200px)
-@media (max-width: 1199.98px) { ... }
-
-// Extra large devices (large desktops)
-// No media query since the extra-large breakpoint has no upper bound on its width
-{% endhighlight %}
-
-{% include callout-info-mediaqueries-breakpoints.md %}
-
-Once again, these media queries are also available via Sass mixins:
-
-{% highlight scss %}
-@include media-breakpoint-down(xs) { ... }
-@include media-breakpoint-down(sm) { ... }
-@include media-breakpoint-down(md) { ... }
-@include media-breakpoint-down(lg) { ... }
-{% endhighlight %}
-
-There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
-
-{% highlight scss %}
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) { ... }
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) { ... }
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) { ... }
-
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) { ... }
-
-// Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) { ... }
-{% endhighlight %}
-
-These media queries are also available via Sass mixins:
-
-{% highlight scss %}
-@include media-breakpoint-only(xs) { ... }
-@include media-breakpoint-only(sm) { ... }
-@include media-breakpoint-only(md) { ... }
-@include media-breakpoint-only(lg) { ... }
-@include media-breakpoint-only(xl) { ... }
-{% endhighlight %}
-
-Similarly, media queries may span multiple breakpoint widths:
-
-{% highlight scss %}
-// Example
-// Apply styles starting from medium devices and up to extra large devices
-@media (min-width: 768px) and (max-width: 1199.98px) { ... }
-{% endhighlight %}
-
-The Sass mixin for targeting the same screen size range would be:
-
-{% highlight scss %}
-@include media-breakpoint-between(md, xl) { ... }
-{% endhighlight %}
-
-## Z-index
-
-Several Bootstrap components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more.
-
-These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There's no reason we couldn't have used `100`+ or `500`+.
-
-We don't encourage customization of these individual values; should you change one, you likely need to change them all.
-
-{% highlight scss %}
-$zindex-dropdown: 1000 !default;
-$zindex-sticky: 1020 !default;
-$zindex-fixed: 1030 !default;
-$zindex-modal-backdrop: 1040 !default;
-$zindex-modal: 1050 !default;
-$zindex-popover: 1060 !default;
-$zindex-tooltip: 1070 !default;
-{% endhighlight %}
-
-To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.
diff --git a/docs/4.1/material/buttons.md b/docs/4.1/material/buttons.md
index 03669543d..29d9dc7d0 100644
--- a/docs/4.1/material/buttons.md
+++ b/docs/4.1/material/buttons.md
@@ -3,7 +3,7 @@ layout: docs
title: Buttons
description: Buttons communicate the action that will occur when the user touches them.
group: material
-redirect_from: "/material/"
+redirect_from: "/docs/4.1/material/"
toc: true
---
@@ -18,15 +18,10 @@ Flat buttons are text-only buttons. They may be used in dialogs, toolbars, or in
**Outline buttons, i.e. `.btn-outline-*`, are the equivalent of Material flat buttons. For more details, please refer to [Components/Buttons documentation]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#outline-buttons).**
{% capture example %}
-
-
-
-
-
-
-
-
-
+
+{% for color in site.data.theme-colors %}
+
+{% endfor %}
{% endcapture %}
{% include example.html content=example %}
@@ -37,15 +32,10 @@ Raised buttons are rectangular-shaped buttons. They may be used inline. They lif
**Default buttons, i.e. `.btn`, are the equivalent of Material raised buttons. For more details, please refer to [Components/Buttons documentation]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#examples).**
{% capture example %}
-
-
-
-
-
-
-
-
-
+
+{% for color in site.data.theme-colors %}
+
+{% endfor %}
{% endcapture %}
{% include example.html content=example %}
@@ -61,12 +51,9 @@ A floating action button represents the primary action in an application, it is
### Colours
{% capture example %}
-
-
-
-
-
-
+{% for color in site.data.theme-colors %}
+
+{% endfor %}
{% endcapture %}
{% include example.html content=example %}
@@ -139,9 +126,7 @@ Logically-grouped options, like Bold, Italic, and Underline, allow multiple opti
{% capture example %}
-
+