` and `` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `![]()
` to make it responsive.
diff --git a/docs/content/images.md b/docs/content/images.md
index e3e616de..41d00157 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -4,6 +4,17 @@ title: Images
group: content
---
+[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
+
+{% callout info %}
+**Bootstrap Reference Documentation**
+This is a part of the reference documentation from Bootstrap.
+It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
+See the Material Design section for more elements and customization options.
+{% endcallout %}
+
+
+
Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
## Contents
diff --git a/docs/content/reboot.md b/docs/content/reboot.md
index 9631a86b..8dfdc745 100644
--- a/docs/content/reboot.md
+++ b/docs/content/reboot.md
@@ -5,6 +5,17 @@ group: content
redirect_from: "/content/"
---
+[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
+
+{% callout info %}
+**Bootstrap Reference Documentation**
+This is a part of the reference documentation from Bootstrap.
+It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
+See the Material Design section for more elements and customization options.
+{% endcallout %}
+
+
+
Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.
Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
diff --git a/docs/content/tables.md b/docs/content/tables.md
index 80bbbf85..ee29e862 100644
--- a/docs/content/tables.md
+++ b/docs/content/tables.md
@@ -4,6 +4,17 @@ title: Tables
group: content
---
+[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
+
+{% callout info %}
+**Bootstrap Reference Documentation**
+This is a part of the reference documentation from Bootstrap.
+It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
+See the Material Design section for more elements and customization options.
+{% endcallout %}
+
+
+
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any ``.
## Contents
diff --git a/docs/content/typography.md b/docs/content/typography.md
index 651e2c49..a7ccbcb3 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -4,6 +4,17 @@ title: Typography
group: content
---
+[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
+
+{% callout info %}
+**Bootstrap Reference Documentation**
+This is a part of the reference documentation from Bootstrap.
+It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
+See the Material Design section for more elements and customization options.
+{% endcallout %}
+
+
+
Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/components/utilities/).
## Contents
@@ -72,7 +83,7 @@ Use the included utility classes to recreate the small secondary heading text fr
{% example html %}
@@ -146,12 +147,11 @@ Below is a complete list of options supported by Material Design for Bootstrap a
### Form groups
The `.mdb-form-group` class is usually added to the `.form-group` element. Whereas the `.form-group` adds structure to forms by providing `margin-bottom` around a label and control pairing,
- the only purpose of the `.mdb-form-group` is to demarcate Material Design behaviors. Decorations and size variations are intended to be specified on
- this element e.g. `.mdb-label-floating`. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`.
+ the only purpose of the `.mdb-form-group` is to demarcate Material Design behaviors for a combination of label/input. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`.
The `.mdb-form-group` is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard
markup. If your code is templated, you may want to add `.mdb-form-group` to the markup directly to prevent any rendering churn from the javascript determining
-and adding the class to the markup. In custom situations, the javascript may not be able to properly resolve the location for the `.mdb-form-group`, so in rare cases
+and adding the class to the markup. In custom situations, the javascript may not be able to properly resolve the location for the `.mdb-form-group`, so in rare or complex cases
you may need to wrap your markup in an `.mdb-form-group` to get appropriate focus/hover behavior.
{% example html %}
diff --git a/docs/material-design/labels.md b/docs/material-design/labels.md
index e79d7c08..19eb4c99 100644
--- a/docs/material-design/labels.md
+++ b/docs/material-design/labels.md
@@ -4,6 +4,56 @@ title: Labels
group: material-design
---
+Below is a complete list of `
| - |
- Extra small - <544px - |
-
- Small - ≥544px - |
-
- Medium - ≥768px - |
-
- Large - ≥992px - |
-
- Extra large - ≥1200px - |
-
|---|---|---|---|---|---|
| Grid behavior | -Horizontal at all times | -Collapsed to start, horizontal above breakpoints | -|||
| Container width | -None (auto) | -576px | -720px | -940px | -1140px | -
| Class prefix | -.col-xs- |
- .col-sm- |
- .col-md- |
- .col-lg- |
- .col-xl- |
-
| # of columns | -12 | -||||
| Gutter width | -1.875rem / 30px (15px on each side of a column) | -||||
| Nestable | -Yes | -||||
| Offsets | -Yes | -||||
| Column ordering | -Yes | -||||
-
-{% endhighlight %}
-
-## Predefined classes
-
-In addition to our semantic mixins, Bootstrap includes an extensive set of prebuilt classes for quickly creating grid columns. It includes options for device-based column sizing, reordering columns, and more.
-
-### Example: Stacked-to-horizontal
-
-Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`.
-
-
-
-...
- ...
-
-{% example html %}
-
-
-### Example: Mobile and desktop
-
-Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.
-
-
-
-.col-md-1
- .col-md-1
- .col-md-1
- .col-md-1
- .col-md-1
- .col-md-1
- .col-md-1
- .col-md-1
- .col-md-1
- .col-md-1
- .col-md-1
- .col-md-1
-
-
-.col-md-8
- .col-md-4
-
-
-.col-md-4
- .col-md-4
- .col-md-4
-
-
-{% endexample %}
-.col-md-6
- .col-md-6
-
-{% example html %}
-
-
-
-### Example: Mobile, tablet, desktop
-
-Build on the previous example by creating even more dynamic and powerful layouts with tablet `.col-sm-*` classes.
-
-
-
-
-
-.col-xs-12 .col-md-8
- .col-xs-6 .col-md-4
-
-
-
-
-.col-xs-6 .col-md-4
- .col-xs-6 .col-md-4
- .col-xs-6 .col-md-4
-
-
-{% endexample %}
-.col-xs-6
- .col-xs-6
-
-{% example html %}
-
-
-### Example: Column wrapping
-
-If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
-
-
-
-.col-xs-12 .col-sm-6 .col-md-8
- .col-xs-6 .col-md-4
-
-
-{% endexample %}
-.col-xs-6 .col-sm-4
- .col-xs-6 .col-sm-4
-
-
- .col-xs-6 .col-sm-4
-
-{% example html %}
-
-
-### Example: Responsive column resets
-
-With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive utility classes]({{ site.baseurl }}/layout/responsive-utilities/).
-
-
-
-{% endexample %}
-.col-xs-9
- .col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
- Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
-Subsequent columns continue along the new line.
-{% example html %}
-
-
-In addition to column clearing at responsive breakpoints, you may need to **reset offsets, pushes, or pulls**. See this in action in [the grid example]({{ site.baseurl }}/examples/grid/).
-
-
-
-{% endexample %}
-.col-xs-6 .col-sm-3
- .col-xs-6 .col-sm-3
-
-
-
-
- .col-xs-6 .col-sm-3
- .col-xs-6 .col-sm-3
-
-{% example html %}
-
-
-### Example: Offsetting columns
-
-Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.col-md-offset-4` moves `.col-md-4` over four columns.
-
-
-
-
-.col-sm-5 .col-md-6
- .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
-
-
-{% endexample %}
-.col-sm-6 .col-md-5 .col-lg-6
- .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
-
-{% example html %}
-
-
-### Example: Nesting columns
-
-To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
-
-
-
-.col-md-4
- .col-md-4 .col-md-offset-4
-
-
-.col-md-3 .col-md-offset-3
- .col-md-3 .col-md-offset-3
-
-
-{% endexample %}
-.col-md-6 .col-md-offset-3
-
-{% example html %}
-
-
-### Example: Column ordering
-
-Easily change the order of our built-in grid columns with `.col-md-push-*` and `.col-md-pull-*` modifier classes.
-
-
-
-{% endexample %}
-
- Level 1: .col-sm-9
-
-
-
-
- Level 2: .col-xs-8 .col-sm-6
-
-
- Level 2: .col-xs-4 .col-sm-6
-
-
-{% example html %}
-
diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md
deleted file mode 100644
index 602bd210..00000000
--- a/docs/layout/media-object.md
+++ /dev/null
@@ -1,173 +0,0 @@
----
-layout: docs
-title: Media object
-group: layout
----
-
-The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) is an abstract element used as the basis for building more complex and repetitive components (like blog comments, Tweets, etc). Included is support for left and right aligned content, content alignment options, nesting, and more.
-
-{% callout info %}
-**Heads up!** When [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/) is enabled, the media object will use `flex` styles wherever possible.
-{% endcallout %}
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## Default media
-
-The default media allow to float a media object (images, video, audio) to the left or right of a content block.
-
-{% example html %}
-
-
-{% endexample %}
-.col-md-9 .col-md-push-3
- .col-md-3 .col-md-pull-9
-
-
- ![Generic placeholder image]()
-
-
-{% endexample %}
-
-## Nesting
-
-Media components can also be nested.
-
-{% example html %}
-
-
-Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
-
-{% endexample %}
-
-## Alignment
-
-The images or other media can be aligned top, middle, or bottom. The default is top aligned.
-
-{% example html %}
-
-
- ![Generic placeholder image]()
-
-
-
-
-Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
-
- ![Generic placeholder image]()
-
-
-
-
- Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
-
-{% endexample %}
-
-{% example html %}
-
-
- ![Generic placeholder image]()
-
-
-
-
-Top aligned media
-Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-
-
-{% endexample %}
-
-{% example html %}
-
-
- ![Generic placeholder image]()
-
-
-
-
-Middle aligned media
-Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-
-
-{% endexample %}
-
-## Media list
-
-With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
-
-{% example html %}
-
-
- ![Generic placeholder image]()
-
-
-
-
-Bottom aligned media
-Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
--
-
-
- - --
- -
--Media heading
-Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
- -- -- -- -
--Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. - ---- --- -
--Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. ---- --- -
--Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
- -
- --
Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -- --- -
-
-
-
-{% 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/Guide/CSS/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 34em)
-// No media query since this is the default in Bootstrap
-
-// Small devices (landscape phones, 34em and up)
-@media (min-width: 34em) { ... }
-
-// Medium devices (tablets, 48em and up)
-@media (min-width: 48em) { ... }
-
-// Large devices (desktops, 62em and up)
-@media (min-width: 62em) { ... }
-
-// Extra large devices (large desktops, 75em and up)
-@media (min-width: 75em) { ... }
-{% 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 34em)
-@media (max-width: 33.9em) { ... }
-
-// Small devices (landscape phones, less than 48em)
-@media (max-width: 47.9em) { ... }
-
-// Medium devices (tablets, less than 62em)
-@media (max-width: 61.9em) { ... }
-
-// Large devices (desktops, less than 75em)
-@media (max-width: 74.9em) { ... }
-
-// Extra large devices (large desktops)
-// No media query since the extra-large breakpoint has no upper bound on its width
-{% endhighlight %}
-
-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) { ... }
-@include media-breakpoint-down(xl) { ... }
-{% endhighlight %}
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
deleted file mode 100644
index f52b52db..00000000
--- a/docs/layout/responsive-utilities.md
+++ /dev/null
@@ -1,230 +0,0 @@
----
-layout: docs
-title: Responsive utilities
-group: layout
----
-
-For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
-
-Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
-
-## Available classes
-
-* The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports.
-* The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports).
-* There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
-* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless.
-* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
-
-
-
-
-
-
-
-| - | - Extra small devices - Portrait phones (<34em) - | -- Small devices - Landscape phones (≥34em) - | -- Medium devices - Tablets (≥48em) - | -- Large devices - Desktops (≥62em) - | -- Extra large devices - Desktops (≥75em) - | -
|---|---|---|---|---|---|
.hidden-xs-down |
- Hidden | -Visible | -Visible | -Visible | -Visible | -
.hidden-sm-down |
- Hidden | -Hidden | -Visible | -Visible | -Visible | -
.hidden-md-down |
- Hidden | -Hidden | -Hidden | -Visible | -Visible | -
.hidden-lg-down |
- Hidden | -Hidden | -Hidden | -Hidden | -Visible | -
.hidden-xl-down |
- Hidden | -Hidden | -Hidden | -Hidden | -Hidden | -
.hidden-xs-up |
- Hidden | -Hidden | -Hidden | -Hidden | -Hidden | -
.hidden-sm-up |
- Visible | -Hidden | -Hidden | -Hidden | -Hidden | -
.hidden-md-up |
- Visible | -Visible | -Hidden | -Hidden | -Hidden | -
.hidden-lg-up |
- Visible | -Visible | -Visible | -Hidden | -Hidden | -
.hidden-xl-up |
- Visible | -Visible | -Visible | -Visible | -Hidden | -
Print classes
-Similar to the regular responsive classes, use these for toggling content for print.
-
-
-
-
-
-
-## Test cases
-
-Resize your browser or load on different devices to test the responsive utility classes.
-
-Green checkmarks indicate the element **is visible** in your current viewport.
-
-| Class | -Browser | -|
|---|---|---|
.visible-print-block |
- Hidden | -Visible (as display: block) |
-
.visible-print-inline |
- Hidden | -Visible (as display: inline) |
-
.visible-print-inline-block |
- Hidden | -Visible (as display: inline-block) |
-
.hidden-print |
- Visible | -Hidden | -
-
-
- ✔ Visible on extra small
- Extra small
-
-
- ✔ Visible on small or narrower
- Small or narrower
-
-
- ✔ Visible on medium or narrower
- Medium or narrower
-
-
- ✔ Visible on large or narrower
- Large or narrower
-
-
-
-
- ✔ Visible on small or wider
- Small or wider
-
-
- ✔ Visible on medium or wider
- Medium or wider
-
-
- ✔ Visible on large or wider
- Large or wider
-
-
- ✔ Visible on extra large
- Extra large
-
-
-
diff --git a/docs/material-design/buttons.md b/docs/material-design/buttons.md
index a873bbe3..93cdf0ed 100644
--- a/docs/material-design/buttons.md
+++ b/docs/material-design/buttons.md
@@ -67,25 +67,25 @@ group: material-design
## Floating Action
{% example html %}
-
- ✔ Your viewport is exactly extra small
- Your viewport is NOT exactly extra small
-
-
-
- Your viewport is NOT exactly small
-
-
-
- Your viewport is NOT exactly medium
-
-
-
- Your viewport is NOT exactly large
-
-
- ✔ Your viewport is exactly extra large
- Your viewport is NOT exactly extra large
-
-