mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-25 02:54:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

add discount notification

Browse Source
This commit is contained in:
filipkappa 2020-10-09 15:02:32 +02:00
parent 0303823dfa
commit 96ac833cc9
75 changed files with 2226 additions and 1558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -14,18 +14,6 @@ the end of your document (just before the `</body>` tag), and everything will be
- [Bootstrap default rendering reference documentation](https://mdbootstrap.github.io/bootstrap-material-design/docs/4.0/components/alerts/)
- [Migration](https://mdbootstrap.github.io/bootstrap-material-design/docs/4.0/migration/)
## Support
The things to do are a lot and the time is little, if you are a passionate developer
with experience with Bootstrap and Material Design for Bootstrap and you have some spare
time, please consider becoming a contributor of this project!
If you are interested contact @MDBootstrap or just adopt one of our [issues](https://github.com/mdbootstrap/bootstrap-material-design/issues).
If you like this project you may support it by [donating](https://www.paypal.me/fezvrasta), starring this repository or reporting issues.
All issues filed should be reduced to a [CodePen](https://codepen.io/rosskevin/pen/eJMMVB) test case where possible.
## Contributing
### Development

14
docs/4.0/bootstrap-components/alerts/index.html
View File

@ -1272,11 +1272,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="examples">Examples</h2>

14
docs/4.0/bootstrap-components/badge/index.html
View File

@ -1261,11 +1261,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="example">Example</h2>

14
docs/4.0/bootstrap-components/breadcrumb/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="overview">Overview</h2>

14
docs/4.0/bootstrap-components/button-group/index.html
View File

@ -1264,11 +1264,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="basic-example">Basic example</h2>

14
docs/4.0/bootstrap-components/buttons/index.html
View File

@ -1278,11 +1278,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="examples">Examples</h2>

14
docs/4.0/bootstrap-components/card/index.html
View File

@ -1441,11 +1441,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="about">About</h2>

14
docs/4.0/bootstrap-components/carousel/index.html
View File

@ -1289,11 +1289,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="how-it-works">How it works</h2>

14
docs/4.0/bootstrap-components/collapse/index.html
View File

@ -1295,11 +1295,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="example">Example</h2>

14
docs/4.0/bootstrap-components/dropdowns/index.html
View File

@ -1306,11 +1306,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="overview">Overview</h2>

14
docs/4.0/bootstrap-components/forms/index.html
View File

@ -1337,11 +1337,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="overview">Overview</h2>

14
docs/4.0/bootstrap-components/input-group/index.html
View File

@ -1266,11 +1266,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="basic-example">Basic example</h2>

14
docs/4.0/bootstrap-components/jumbotron/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.</p>

14
docs/4.0/bootstrap-components/list-group/index.html
View File

@ -1289,11 +1289,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="basic-example">Basic example</h2>

14
docs/4.0/bootstrap-components/modal/index.html
View File

@ -1338,11 +1338,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="how-it-works">How it works</h2>

14
docs/4.0/bootstrap-components/navbar/index.html
View File

@ -1273,11 +1273,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="how-it-works">How it works</h2>

14
docs/4.0/bootstrap-components/navs/index.html
View File

@ -1285,11 +1285,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="base-nav">Base nav</h2>

14
docs/4.0/bootstrap-components/pagination/index.html
View File

@ -1256,11 +1256,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="overview">Overview</h2>

14
docs/4.0/bootstrap-components/popovers/index.html
View File

@ -1289,11 +1289,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="overview">Overview</h2>

14
docs/4.0/bootstrap-components/progress/index.html
View File

@ -1258,11 +1258,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="how-it-works">How it works</h2>

14
docs/4.0/bootstrap-components/scrollspy/index.html
View File

@ -1311,11 +1311,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="how-it-works">How it works</h2>

14
docs/4.0/bootstrap-components/tooltips/index.html
View File

@ -1286,11 +1286,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="overview">Overview</h2>

14
docs/4.0/browser-bugs/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>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.</p>

14
docs/4.0/content/code/index.html
View File

@ -1256,11 +1256,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="inline-code">Inline code</h2>

14
docs/4.0/content/figures/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code class="highlighter-rouge">&lt;figure&gt;</code>.</p>

378
docs/4.0/content/images/index.html
View File

@ -1,63 +1,69 @@
<!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>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
Images &middot; Bootstrap Material Design
</title>
</title>
<!-- Twitter -->
<meta name="twitter:site" content="@MDBootstrap">
<meta name="twitter:creator" content="@MDBootstrap">
<!-- Twitter -->
<meta name="twitter:site" content="@MDBootstrap">
<meta name="twitter:creator" content="@MDBootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Images">
<meta name="twitter:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
<meta name="twitter:description"
content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
<meta name="twitter:image" content="https://mdbootstrap.github.io/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<!-- Facebook -->
<meta property="og:url" content="https://mdbootstrap.github.io/docs/4.0/content/images/">
<meta property="og:title" content="Images">
<meta property="og:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
<meta property="og:description"
content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/mdb5-about-v2.jpg">
<meta property="og:image:secure_url" content="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/mdb5-about-v2.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image"
content="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/mdb5-about-v2.jpg">
<meta property="og:image:secure_url"
content="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/mdb5-about-v2.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
<meta name="author" content="MDB Team">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
<meta name="author" content="MDB Team">
<!-- Bootstrap core CSS -->
<!-- Bootstrap core CSS -->
<link href="/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" >
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Documentation extras -->
<!-- Documentation extras -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<link href="/bootstrap-material-design/assets/css/docs.min.css" rel="stylesheet">
<link href="/bootstrap-material-design/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/bootstrap-material-design/apple-touch-icon.png">
<link rel="icon" href="/bootstrap-material-design/favicon.ico">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/bootstrap-material-design/apple-touch-icon.png">
<link rel="icon" href="/bootstrap-material-design/favicon.ico">
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
@ -66,20 +72,28 @@
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/bootstrap-material-design/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" 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>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link " href="/bootstrap-material-design/" >Home</a>
<a class="nav-link " href="/bootstrap-material-design/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/bootstrap-material-design/docs/4.0/getting-started/introduction/" >Documentation</a>
<a class="nav-link active"
href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/bootstrap-material-design/docs/4.0/examples/" >Examples</a>
<a class="nav-link " href="/bootstrap-material-design/docs/4.0/examples/">Examples</a>
</li>
<li class="nav-item">
@ -91,7 +105,8 @@
<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">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
v4.x
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
@ -102,36 +117,57 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/mdbootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" 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 class="nav-link p-2" href="https://github.com/mdbootstrap" target="_blank" rel="noopener"
aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" 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>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/MDBootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" 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 class="nav-link p-2" href="https://twitter.com/MDBootstrap" target="_blank" rel="noopener"
aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" 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>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/mdbootstrap/bootstrap-material-design/releases">Download</a>
</header>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3"
href="https://github.com/mdbootstrap/bootstrap-material-design/releases">Download</a>
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..."
autocomplete="off">
<button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse"
data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false"
aria-label="Toggle docs avigation">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30"
focusable="false">
<title>Menu</title>
<path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10"
d="M4 7h22M4 15h22M4 23h22" />
</svg>
</button>
</form>
</form>
<nav class="collapse bd-links" id="bd-docs-nav">
<nav class="collapse bd-links" id="bd-docs-nav">
@ -1230,105 +1266,148 @@
</ul>
</div>
</nav>
</nav>
</div>
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a>
<ul>
<ul>
<ul>
<li class="toc-entry toc-h5"><a href="#svg-images-and-ie-10">SVG images and IE 10</a></li>
</ul>
</ul>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#image-thumbnails">Image thumbnails</a></li>
<li class="toc-entry toc-h2"><a href="#aligning-images">Aligning images</a></li>
<li class="toc-entry toc-h2"><a href="#picture">Picture</a></li>
</ul>
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a>
<ul>
<ul>
<ul>
<li class="toc-entry toc-h5"><a href="#svg-images-and-ie-10">SVG images and IE 10</a></li>
</ul>
</ul>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#image-thumbnails">Image thumbnails</a></li>
<li class="toc-entry toc-h2"><a href="#aligning-images">Aligning images</a></li>
<li class="toc-entry toc-h2"><a href="#picture">Picture</a></li>
</ul>
</div>
<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">Images</h1>
<p class="bd-lead">Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.</p>
<p class="bd-lead">Documentation and examples for opting images into responsive behavior (so they never become
larger than their parent elements) and add lightweight styles to them—all via classes.</p>
<div class="row">
<div class="alert alert-danger col-md-6 text-center" role="alert">
<div class="col-md-6 text-center">
<div class="alert alert-danger" role="alert">
This UI Kit is dedicated to Bootstrap 4 &amp; Material Design.
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683" class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="responsive-images">Responsive images</h2>
<p>Images in Bootstrap are made responsive with <code class="highlighter-rouge">.img-fluid</code>. <code class="highlighter-rouge">max-width: 100%;</code> and <code class="highlighter-rouge">height: auto;</code> are applied to the image so that it scales with the parent element.</p>
<p>Images in Bootstrap are made responsive with <code class="highlighter-rouge">.img-fluid</code>. <code
class="highlighter-rouge">max-width: 100%;</code> and <code class="highlighter-rouge">height: auto;</code>
are applied to the image so that it scales with the parent element.</p>
<div class="bd-example">
<div class="bd-example">
<img data-src="holder.js/100px250" class="img-fluid" alt="Generic responsive image" />
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid"</span> <span class="na">alt=</span><span class="s">"Responsive image"</span><span class="nt">&gt;</span></code></pre></figure>
<div class="bd-callout bd-callout-warning">
<h5 id="svg-images-and-ie-10">SVG images and IE 10</h5>
<p>In Internet Explorer 10, SVG images with <code class="highlighter-rouge">.img-fluid</code> are disproportionately sized. To fix this, add <code class="highlighter-rouge">width: 100% \9;</code> where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.</p>
</div>
<h2 id="image-thumbnails">Image thumbnails</h2>
<p>In addition to our <a href="/bootstrap-material-design/docs/4.0/utilities/borders/">border-radius utilities</a>, you can use <code class="highlighter-rouge">.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" />
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-thumbnail"</span><span class="nt">&gt;</span></code></pre></figure>
<h2 id="aligning-images">Aligning images</h2>
<p>Align images with the <a href="/bootstrap-material-design/docs/4.0/utilities/float">helper float classes</a> or <a href="/bootstrap-material-design/docs/4.0/utilities/text/#text-alignment">text alignment classes</a>. <code class="highlighter-rouge">block</code>-level images can be centered using <a href="/bootstrap-material-design/docs/4.0/utilities/spacing/#horizontal-centering">the <code class="highlighter-rouge">.mx-auto</code> margin utility class</a>.</p>
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners" />
<img data-src="holder.js/200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners" />
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded float-left"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded float-right"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span></code></pre></figure>
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners" />
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mx-auto d-block"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span></code></pre></figure>
<div class="bd-example bd-example-images">
<div class="text-center">
<img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners" />
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;</span>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid"</span> <span class="na">alt=</span><span class="s">"Responsive image"</span><span class="nt">&gt;</span></code></pre>
</figure>
<div class="bd-callout bd-callout-warning">
<h5 id="svg-images-and-ie-10">SVG images and IE 10</h5>
<p>In Internet Explorer 10, SVG images with <code class="highlighter-rouge">.img-fluid</code> are
disproportionately sized. To fix this, add <code class="highlighter-rouge">width: 100% \9;</code> where
necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.</p>
</div>
<h2 id="image-thumbnails">Image thumbnails</h2>
<p>In addition to our <a href="/bootstrap-material-design/docs/4.0/utilities/borders/">border-radius
utilities</a>, you can use <code class="highlighter-rouge">.img-thumbnail</code> to give an image a rounded
1px border appearance.</p>
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-thumbnail"
alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" />
</div>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-thumbnail"</span><span class="nt">&gt;</span></code></pre>
</figure>
<h2 id="aligning-images">Aligning images</h2>
<p>Align images with the <a href="/bootstrap-material-design/docs/4.0/utilities/float">helper float classes</a>
or <a href="/bootstrap-material-design/docs/4.0/utilities/text/#text-alignment">text alignment classes</a>.
<code class="highlighter-rouge">block</code>-level images can be centered using <a
href="/bootstrap-material-design/docs/4.0/utilities/spacing/#horizontal-centering">the <code
class="highlighter-rouge">.mx-auto</code> margin utility class</a>.</p>
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="rounded float-left"
alt="A generic square placeholder image with rounded corners" />
<img data-src="holder.js/200x200" class="rounded float-right"
alt="A generic square placeholder image with rounded corners" />
</div>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded float-left"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded float-right"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span></code></pre>
</figure>
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="rounded mx-auto d-block"
alt="A generic square placeholder image with rounded corners" />
</div>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mx-auto d-block"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span></code></pre>
</figure>
<div class="bd-example bd-example-images">
<div class="text-center">
<img data-src="holder.js/200x200" class="rounded"
alt="A generic square placeholder image with rounded corners" />
</div>
</div>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
<h2 id="picture">Picture</h2>
<h2 id="picture">Picture</h2>
<p>If you are using the <code class="highlighter-rouge">&lt;picture&gt;</code> element to specify multiple <code class="highlighter-rouge">&lt;source&gt;</code> elements for a specific <code class="highlighter-rouge">&lt;img&gt;</code>, make sure to add the <code class="highlighter-rouge">.img-*</code> classes to the <code class="highlighter-rouge">&lt;img&gt;</code> and not to the <code class="highlighter-rouge">&lt;picture&gt;</code> tag.</p>
<p>If you are using the <code class="highlighter-rouge">&lt;picture&gt;</code> element to specify multiple <code
class="highlighter-rouge">&lt;source&gt;</code> elements for a specific <code
class="highlighter-rouge">&lt;img&gt;</code>, make sure to add the <code
class="highlighter-rouge">.img-*</code> classes to the <code class="highlighter-rouge">&lt;img&gt;</code>
and not to the <code class="highlighter-rouge">&lt;picture&gt;</code> tag.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">​<span class="nt">&lt;picture&gt;</span>
<figure class="highlight">
<pre><code class="language-html" data-lang="html">​<span class="nt">&lt;picture&gt;</span>
<span class="nt">&lt;source</span> <span class="na">srcset=</span><span class="s">"..."</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/picture&gt;</span></code></pre></figure>
<span class="nt">&lt;/picture&gt;</span></code></pre>
</figure>
</main>
@ -1336,30 +1415,46 @@
</div>
<script src="/bootstrap-material-design/assets/js/vendor/split.min.js">
</script>
</script>
<script>
<script>
Split.setup({
mdbootstrap: function () {document.body.classList.add('mdbootstrap')},
mdbootstrap: function () {document.body.classList.add('mdbootstrap')},
mdbootstrap2: function () {document.body.classList.add('mdbootstrap')},
mdbootstrap: function () {
document.body.classList.add('mdbootstrap')
},
mdbootstrap: function () {
document.body.classList.add('mdbootstrap')
},
mdbootstrap2: function () {
document.body.classList.add('mdbootstrap')
},
});
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
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)
}, 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-80431047-1', 'auto');
ga('send', 'pageview');
</script>
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script>
window.jQuery || document.write(
'<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>')
</script>
<script src="/bootstrap-material-design/assets/js/vendor/popper.min.js"></script>
<script src="https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js" crossorigin="anonymous"></script>
<script src="/bootstrap-material-design/assets/js/vendor/popper.min.js"></script>
<script src="https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js" crossorigin="anonymous"></script>
<script src="/bootstrap-material-design/dist/js/bootstrap-material-design.js"></script>
@ -1371,20 +1466,20 @@
<script src="/bootstrap-material-design/assets/js/src/application.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/bootstrap-material-design/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/bootstrap-material-design/assets/js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/bootstrap-material-design/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/bootstrap-material-design/assets/js/ie-emulation-modes-warning.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
var docsearch = docsearch({
apiKey: 'b5c13bef25101d81f781cc15f4485a52',
indexName: 'fezvrasta_bootstrap_material_design',
inputSelector: '#search-input',
handleSelected: function (input, event, suggestion) {
var url = suggestion.url;
url = suggestion.isLvl1 ? url.split('#')[0]: 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;
},
@ -1397,17 +1492,18 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
</script>
<script>
Holder.addTheme('gray', {
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
</script>
})
</script>
</body>
</body>
</html>

14
docs/4.0/content/reboot/index.html
View File

@ -1276,11 +1276,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="approach">Approach</h2>

14
docs/4.0/content/tables/index.html
View File

@ -1277,11 +1277,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="examples">Examples</h2>

14
docs/4.0/content/typography/index.html
View File

@ -1276,11 +1276,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="global-settings">Global settings</h2>

14
docs/4.0/examples/index.html
View File

@ -133,11 +133,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
</header>

14
docs/4.0/extend/approach/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on <em>why</em> we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.</p>

14
docs/4.0/extend/icons/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p>

14
docs/4.0/extend/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>todo: this entire page</p>

14
docs/4.0/getting-started/accessibility/index.html
View File

@ -1260,11 +1260,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.</p>

14
docs/4.0/getting-started/best-practices/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>We’ve designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we’ve gathered from years of working on and using it ourselves.</p>

14
docs/4.0/getting-started/browsers-devices/index.html
View File

@ -1276,11 +1276,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="supported-browsers">Supported browsers</h2>

14
docs/4.0/getting-started/build-tools/index.html
View File

@ -1256,11 +1256,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="tooling-setup">Tooling setup</h2>

14
docs/4.0/getting-started/contents/index.html
View File

@ -1255,11 +1255,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="precompiled-bootstrap">Precompiled Bootstrap</h2>

14
docs/4.0/getting-started/download/index.html
View File

@ -1259,11 +1259,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>

14
docs/4.0/getting-started/introduction/index.html
View File

@ -1267,11 +1267,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="quick-start">Quick start</h2>

14
docs/4.0/getting-started/javascript/index.html
View File

@ -1282,11 +1282,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="individual-or-compiled">Individual or compiled</h2>

14
docs/4.0/getting-started/theming/index.html
View File

@ -1289,11 +1289,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="introduction">Introduction</h2>

14
docs/4.0/getting-started/webpack/index.html
View File

@ -1259,11 +1259,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="installing-bootstrap">Installing Bootstrap</h2>

14
docs/4.0/layout/grid/index.html
View File

@ -1302,11 +1302,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="how-it-works">How it works</h2>

14
docs/4.0/layout/media-object/index.html
View File

@ -1302,11 +1302,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="example">Example</h2>

14
docs/4.0/layout/overview/index.html
View File

@ -1254,11 +1254,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="containers">Containers</h2>

14
docs/4.0/layout/utilities-for-layout/index.html
View File

@ -1255,11 +1255,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="changing-display">Changing <code class="highlighter-rouge">display</code></h2>

14
docs/4.0/material-design/buttons/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="contents">Contents</h2>

14
docs/4.0/material-design/collapse-inline/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>The Material Design for Bootstrap <code class="highlighter-rouge">CollapseInline</code> plugin allows you to toggle inline content on your pages with a bit of JavaScript and some classes. This plugin utilizes a handful of classes from the <a href="/bootstrap-material-design/components/collapse/">Bootstrap collapse plugin</a> for easy toggle behavior. Since most functionality and documentation (including a rich set of Javascript events) is already provided by the <a href="/bootstrap-material-design/components/collapse/">Bootstrap collapse plugin</a>, the following will focus only on some samples utilizing the BMD <code class="highlighter-rouge">CollapseInline</code> component.</p>

14
docs/4.0/material-design/drawers/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>The Material Design for Bootstrap <code class="highlighter-rouge">Drawer</code> provides a markup structure and plugin that allows you to display content on the bounds of any containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The BMD implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes.</p>

14
docs/4.0/material-design/extensions/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Material Design for Bootstrap provides seamlessly integration with some extensions.</p>

14
docs/4.0/material-design/forms/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.</p>

14
docs/4.0/material-design/labels/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Below is a complete list of <code class="highlighter-rouge">&lt;label&gt;</code> class options supported by Material Design for Bootstrap:</p>

14
docs/4.0/material-design/list-groups/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Material design list groups are specialized versions of their bootstrap counterparts, opting for the flexbox layout to achieve

14
docs/4.0/material-design/menus/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Bootstrap users know these as <a href="/bootstrap-material-design/components/dropdowns/">dropdowns</a>, but these are also known as menus in the <a href="https://www.google.com/design/spec/components/menus.html#menus-specs">Material Design specification</a>.</p>

14
docs/4.0/material-design/navs/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Navigation available in Bootstrap share general markup and styles, from the base <code class="highlighter-rouge">.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>

14
docs/4.0/material-design/selections/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="contents">Contents</h2>

14
docs/4.0/material-design/snackbars/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Snackbars and toasts can be created using the <a href="https://github.com/FezVrasta/snackbarjs">SnackbarJS</a> plugin developed by us.</p>

14
docs/4.0/migration/index.html
View File

@ -1309,11 +1309,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="stable-changes">Stable changes</h2>

14
docs/4.0/utilities/borders/index.html
View File

@ -1259,11 +1259,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="border">Border</h2>

14
docs/4.0/utilities/clearfix/index.html
View File

@ -1251,11 +1251,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Easily clear <code class="highlighter-rouge">float</code>s by adding <code class="highlighter-rouge">.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>

14
docs/4.0/utilities/close-icon/index.html
View File

@ -1251,11 +1251,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p><strong>Be sure to include text for screen readers</strong>, as we’ve done with <code class="highlighter-rouge">aria-label</code>.</p>

14
docs/4.0/utilities/colors/index.html
View File

@ -1261,11 +1261,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="color">Color</h2>

14
docs/4.0/utilities/display/index.html
View File

@ -1256,11 +1256,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="how-it-works">How it works</h2>

14
docs/4.0/utilities/embed/index.html
View File

@ -1254,11 +1254,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="about">About</h2>

14
docs/4.0/utilities/flex/index.html
View File

@ -1265,11 +1265,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>

14
docs/4.0/utilities/float/index.html
View File

@ -1255,11 +1255,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="overview">Overview</h2>

14
docs/4.0/utilities/image-replacement/index.html
View File

@ -1252,11 +1252,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Utilize the <code class="highlighter-rouge">.text-hide</code> class or mixin to help replace an element’s text content with a background image.</p>

14
docs/4.0/utilities/position/index.html
View File

@ -1249,11 +1249,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="common-values">Common values</h2>

14
docs/4.0/utilities/screenreaders/index.html
View File

@ -1251,11 +1251,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Hide an element to all devices <strong>except screen readers</strong> with <code class="highlighter-rouge">.sr-only</code>. Combine <code class="highlighter-rouge">.sr-only</code> with <code class="highlighter-rouge">.sr-only-focusable</code> to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.</p>

14
docs/4.0/utilities/sizing/index.html
View File

@ -1251,11 +1251,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Width and height utilities are generated from the <code class="highlighter-rouge">$sizes</code> Sass map in <code class="highlighter-rouge">_variables.scss</code>. Includes support for <code class="highlighter-rouge">25%</code>, <code class="highlighter-rouge">50%</code>, <code class="highlighter-rouge">75%</code>, <code class="highlighter-rouge">100%</code>, and <code class="highlighter-rouge">auto</code> by default. Modify those values as you need to generate different utilities here.</p>

14
docs/4.0/utilities/spacing/index.html
View File

@ -1258,11 +1258,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="how-it-works">How it works</h2>

14
docs/4.0/utilities/text/index.html
View File

@ -1255,11 +1255,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<h2 id="text-alignment">Text alignment</h2>

14
docs/4.0/utilities/vertical-align/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code class="highlighter-rouge">vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>

14
docs/4.0/utilities/visibility/index.html
View File

@ -1246,11 +1246,19 @@
<hr>
<strong>Discover the latest Kit for Bootstrap 5 &amp; Material Design 2.0!
<a type="button" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683"
class="btn btn-outline-danger mt-3">GET
BOOTSTRAP
5 KIT FOR FREE</a>
class="btn btn-outline-danger mt-3">DOWNLOAD BOOTSTRAP 5 FREE KIT</a>
</strong></div>
</div>
<div class="col-md-6 text-center">
<div class="alert alert-primary" role="alert">
Get Material KIT PRO 20% OFF
<hr>
<strong>Use code <code>5V9QGF</code> on the checkout to get the discount.
<a type="button" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683"
class="btn btn-outline-primary mt-3">GET MATERIAL KIT PRO</a>
</strong></div>
</div>
</div>
<p>Set the <code class="highlighter-rouge">visibility</code> of elements with our visibility utilities. These do not modify the <code class="highlighter-rouge">display</code> value at all and are helpful for hiding content from most users, but still keeping them for screen readers.</p>