bootstrap-widgets
Version:
Responsive Widgets & Addons built with the latest Bootstrap 5. Calendar, eCommerce gallery, Chat, File upload, Countdown, WYSIWYG, Drag & drop, Filters, & more
442 lines (391 loc) • 24.6 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="css/bootstrap-widgets.min.css" />
</head>
<body>
<!-- Start your project here-->
<div class="container">
<div class="d-flex justify-content-center align-items-center" style="height: 100vh">
<section class="text-center">
<div class="row">
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Calendar</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded" style="">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/calendar.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/calendar.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Calendar Plugin">
</picture>
<a href="/docs/standard/plugins/calendar/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>eCommerce gallery</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/ecommerce-gallery.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/ecommerce-gallery.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design eCommerce Gallery Plugin">
</picture>
<a href="/docs/standard/plugins/ecommerce-gallery/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>File upload</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/file-upload.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/file-upload.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design File Upload Plugin">
</picture>
<a href="/docs/standard/plugins/file-upload/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Filters</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/filters.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/filters.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Filters Plugin">
</picture>
<a href="/docs/standard/plugins/filters/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Mention</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/mention.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/mention.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Mention Plugin">
</picture>
<a href="/docs/standard/plugins/mention/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Multi item carousel</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/multi-item-carousel.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/multi-item-carousel.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Multi Item Carousel Plugin">
</picture>
<a href="/docs/standard/plugins/multi-item-carousel/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Transfer</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/transfer.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/transfer.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Transfer Plugin">
</picture>
<a href="/docs/standard/plugins/transfer/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Vector maps</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/vector-maps.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/vector-maps.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Vector Maps Plugin">
</picture>
<a href="/docs/standard/plugins/vector-maps/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Table editor</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/table-editor.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/table-editor.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Table Editor Plugin">
</picture>
<a href="/docs/standard/plugins/table-editor/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Cookies management</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/cookies-management.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/cookies-management.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Cookies Management Plugin">
</picture>
<a href="/docs/standard/plugins/cookies-management/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Storage management</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/storage-management.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/storage-management.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Storage Management Plugin">
</picture>
<a href="/docs/standard/plugins/storage-management/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Tree view</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/tree-view.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/tree-view.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Tree View Plugin">
</picture>
<a href="/docs/standard/plugins/tree-view/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Dummy</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/dummy.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/dummy.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Dummy Plugin">
</picture>
<a href="/docs/standard/plugins/dummy/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Countdown</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/countdown.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/countdown.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Countdown Plugin">
</picture>
<a href="/docs/standard/plugins/countdown/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Data parser</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/data-parser.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/data-parser.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Data Parser Plugin">
</picture>
<a href="/docs/standard/plugins/data-parser/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Input mask</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/input-mask.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/input-mask.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Input Mask Plugin">
</picture>
<a href="/docs/standard/plugins/input-mask/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Color picker</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/color-picker.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/color-picker.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Color Picker Plugin">
</picture>
<a href="/docs/standard/plugins/color-picker/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Parallax</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/parallax.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/parallax.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Parallax Plugin">
</picture>
<a href="/docs/standard/plugins/parallax/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Captcha</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/captcha.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/captcha.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Captcha Plugin">
</picture>
<a href="/docs/standard/plugins/captcha/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Scroll Status</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/scroll-status.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/scroll-status.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Scroll Status Plugin">
</picture>
<a href="/docs/standard/plugins/scroll-status/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>TreeTable</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/treetable.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/treetable.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design TreeTable Plugin">
</picture>
<a href="/docs/standard/plugins/treetable/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Organization chart</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/organization-chart.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/organization-chart.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Organization Chart Plugin">
</picture>
<a href="/docs/standard/plugins/organization-chart/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>WYSIWYG editor</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/wysiwyg-editor.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/wysiwyg-editor.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design WYSIWYG Editor Plugin">
</picture>
<a href="/docs/standard/plugins/wysiwyg-editor/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Onboarding</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/onboarding.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/onboarding.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Onboarding Plugin">
</picture>
<a href="/docs/standard/plugins/onboarding/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-lg-3 col-md-6 mb-4">
<p class="mb-3"><strong>Drag and drop</strong></p>
<div class="bg-image hover-overlay ripple shadow-1-strong rounded">
<picture>
<source srcset="
https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/drag-and-drop.webp
" type="image/webp">
<img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/plugins/drag-and-drop.webp" class="w-100" alt="MDB 5 - Bootstrap 5 & Material Design Drag and Drop Plugin">
</picture>
<a href="/docs/standard/plugins/drag-and-drop/" target="_blank">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>