@grigorov-it/mazer
Version:
Free and Open-source Bootstrap 5 Admin Dashboard Template and Landing Page
2,493 lines • 116 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal - Mazer Admin Dashboard</title>
<link
rel="shortcut icon"
href="./assets/compiled/svg/favicon.svg"
type="image/x-icon"
/>
<link
rel="shortcut icon"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAiCAYAAADRcLDBAAAEs2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjMzIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMzQiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIzMyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMzQiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249Ijk2LjAiCiAgIHRpZmY6WVJlc29sdXRpb249Ijk2LjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjItMDMtMzFUMTA6NTA6MjMrMDI6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDMtMzFUMTA6NTA6MjMrMDI6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS4xMC4xIgogICAgICBzdEV2dDp3aGVuPSIyMDIyLTAzLTMxVDEwOjUwOjIzKzAyOjAwIi8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz5V57uAAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz9maORHo1hYKC9hISNGTWwsRn4VFmOUX5uZZ36oeTOv954kW2WrKLHxa8FfwFZZK0WkZClrYoOe87ypmWTO7dzzud97z+nec8ETzaiaWd4NWtYyIiNhZWZ2TvE946WZSjqoj6mmPjE1HKWkfdxR5sSbgFOr9Ll/rXoxYapQVik8oOqGJTwqPL5i6Q5vCzeo6dii8KlwpyEXFL519LjLLw6nXP5y2IhGBsFTJ6ykijhexGra0ITl5bRqmWU1fx/nJTWJ7PSUxBbxJkwijBBGYYwhBgnRQ7/MIQIE6ZIVJfK7f/MnyUmuKrPOKgZLpEhj0SnqslRPSEyKnpCRYdXp/9++msneoFu9JgwVT7b91ga+LfjetO3PQ9v+PgLvI1xkC/m5A+h7F32zoLXug38dzi4LWnwHzjeg8UGPGbFfySvuSSbh9QRqZ6H+Gqrm3Z7l9zm+h+iafNUV7O5Bu5z3L/wAdthn7QIme0YAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJTSURBVFiF7Zi9axRBGIefEw2IdxFBRQsLWUTBaywSK4ubdSGVIY1Y6HZql8ZKCGIqwX/AYLmCgVQKfiDn7jZeEQMWfsSAHAiKqPiB5mIgELWYOW5vzc3O7niHhT/YZvY37/swM/vOzJbIqVq9uQ04CYwCI8AhYAlYAB4Dc7HnrOSJWcoJcBS4ARzQ2F4BZ2LPmTeNuykHwEWgkQGAet9QfiMZjUSt3hwD7psGTWgs9pwH1hC1enMYeA7sKwDxBqjGnvNdZzKZjqmCAKh+U1kmEwi3IEBbIsugnY5avTkEtIAtFhBrQCX2nLVehqyRqFoCAAwBh3WGLAhbgCRIYYinwLolwLqKUwwi9pxV4KUlxKKKUwxC6ZElRCPLYAJxGfhSEOCz6m8HEXvOB2CyIMSk6m8HoXQTmMkJcA2YNTHm3congOvATo3tE3A29pxbpnFzQSiQPcB55IFmFNgFfEQeahaAGZMpsIJIAZWAHcDX2HN+2cT6r39GxmvC9aPNwH5gO1BOPFuBVWAZue0vA9+A12EgjPadnhCuH1WAE8ivYAQ4ohKaagV4gvxi5oG7YSA2vApsCOH60WngKrA3R9IsvQUuhIGY00K4flQG7gHH/mLytB4C42EgfrQb0mV7us8AAMeBS8mGNMR4nwHamtBB7B4QRNdaS0M8GxDEog7iyoAguvJ0QYSBuAOcAt71Kfl7wA8DcTvZ2KtOlJEr+ByyQtqqhTyHTIeB+ONeqi3brh+VgIN0fohUgWGggizZFTplu12yW8iy/YLOGWMpDMTPXnl+Az9vj2HERYqPAAAAAElFTkSuQmCC"
type="image/png"
/>
<link rel="stylesheet" href="./assets/compiled/css/app.css" />
<link rel="stylesheet" href="./assets/compiled/css/app-dark.css" />
</head>
<body>
<script src="assets/static/js/initTheme.js"></script>
<div id="app">
<div id="sidebar">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"
><img
src="./assets/compiled/svg/logo.svg"
alt="Logo"
srcset=""
/></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--system-uicons"
width="20"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 21 21"
>
<g
fill="none"
fill-rule="evenodd"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2"
opacity=".3"
></path>
<g transform="translate(-210 -1)">
<path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path>
<circle cx="220.5" cy="11.5" r="4"></circle>
<path
d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"
></path>
</g>
</g>
</svg>
<div class="form-check form-switch fs-6">
<input
class="form-check-input me-0"
type="checkbox"
id="toggle-dark"
style="cursor: pointer"
/>
<label class="form-check-label"></label>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="20"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"
></path>
</svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"
><i class="bi bi-x bi-middle"></i
></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li class="sidebar-item">
<a href="index.html" class="sidebar-link">
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sidebar-item active has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item">
<a href="component-accordion.html" class="submenu-link"
>Accordion</a
>
</li>
<li class="submenu-item">
<a href="component-alert.html" class="submenu-link"
>Alert</a
>
</li>
<li class="submenu-item">
<a href="component-badge.html" class="submenu-link"
>Badge</a
>
</li>
<li class="submenu-item">
<a href="component-breadcrumb.html" class="submenu-link"
>Breadcrumb</a
>
</li>
<li class="submenu-item">
<a href="component-button.html" class="submenu-link"
>Button</a
>
</li>
<li class="submenu-item">
<a href="component-card.html" class="submenu-link">Card</a>
</li>
<li class="submenu-item">
<a href="component-carousel.html" class="submenu-link"
>Carousel</a
>
</li>
<li class="submenu-item">
<a href="component-collapse.html" class="submenu-link"
>Collapse</a
>
</li>
<li class="submenu-item">
<a href="component-dropdown.html" class="submenu-link"
>Dropdown</a
>
</li>
<li class="submenu-item">
<a href="component-list-group.html" class="submenu-link"
>List Group</a
>
</li>
<li class="submenu-item active">
<a href="component-modal.html" class="submenu-link"
>Modal</a
>
</li>
<li class="submenu-item">
<a href="component-navs.html" class="submenu-link">Navs</a>
</li>
<li class="submenu-item">
<a href="component-pagination.html" class="submenu-link"
>Pagination</a
>
</li>
<li class="submenu-item">
<a href="component-progress.html" class="submenu-link"
>Progress</a
>
</li>
<li class="submenu-item">
<a href="component-spinner.html" class="submenu-link"
>Spinner</a
>
</li>
<li class="submenu-item">
<a href="component-toasts.html" class="submenu-link"
>Toasts</a
>
</li>
<li class="submenu-item">
<a href="component-tooltip.html" class="submenu-link"
>Tooltip</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="extra-component-avatar.html" class="submenu-link"
>Avatar</a
>
</li>
<li class="submenu-item">
<a href="extra-component-divider.html" class="submenu-link"
>Divider</a
>
</li>
<li class="submenu-item">
<a
href="extra-component-date-picker.html"
class="submenu-link"
>Date Picker</a
>
</li>
<li class="submenu-item">
<a
href="extra-component-sweetalert.html"
class="submenu-link"
>Sweet Alert</a
>
</li>
<li class="submenu-item">
<a href="extra-component-toastify.html" class="submenu-link"
>Toastify</a
>
</li>
<li class="submenu-item">
<a href="extra-component-rating.html" class="submenu-link"
>Rating</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="layout-default.html" class="submenu-link"
>Default Layout</a
>
</li>
<li class="submenu-item">
<a href="layout-vertical-1-column.html" class="submenu-link"
>1 Column</a
>
</li>
<li class="submenu-item">
<a href="layout-vertical-navbar.html" class="submenu-link"
>Vertical Navbar</a
>
</li>
<li class="submenu-item">
<a href="layout-rtl.html" class="submenu-link"
>RTL Layout</a
>
</li>
<li class="submenu-item">
<a href="layout-horizontal.html" class="submenu-link"
>Horizontal Menu</a
>
</li>
</ul>
</li>
<li class="sidebar-title">Forms & Tables</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-element-input.html" class="submenu-link"
>Input</a
>
</li>
<li class="submenu-item">
<a href="form-element-input-group.html" class="submenu-link"
>Input Group</a
>
</li>
<li class="submenu-item">
<a href="form-element-select.html" class="submenu-link"
>Select</a
>
</li>
<li class="submenu-item">
<a href="form-element-radio.html" class="submenu-link"
>Radio</a
>
</li>
<li class="submenu-item">
<a href="form-element-checkbox.html" class="submenu-link"
>Checkbox</a
>
</li>
<li class="submenu-item">
<a href="form-element-textarea.html" class="submenu-link"
>Textarea</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="form-layout.html" class="sidebar-link">
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-journal-check"></i>
<span>Form Validation</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-validation-parsley.html" class="submenu-link"
>Parsley</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-editor-quill.html" class="submenu-link"
>Quill</a
>
</li>
<li class="submenu-item">
<a href="form-editor-ckeditor.html" class="submenu-link"
>CKEditor</a
>
</li>
<li class="submenu-item">
<a href="form-editor-summernote.html" class="submenu-link"
>Summernote</a
>
</li>
<li class="submenu-item">
<a href="form-editor-tinymce.html" class="submenu-link"
>TinyMCE</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="table.html" class="sidebar-link">
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="table-datatable.html" class="submenu-link"
>Datatable</a
>
</li>
<li class="submenu-item">
<a href="table-datatable-jquery.html" class="submenu-link"
>Datatable (jQuery)</a
>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-widgets-chatbox.html" class="submenu-link"
>Chatbox</a
>
</li>
<li class="submenu-item">
<a href="ui-widgets-pricing.html" class="submenu-link"
>Pricing</a
>
</li>
<li class="submenu-item">
<a href="ui-widgets-todolist.html" class="submenu-link"
>To-do List</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-icons-bootstrap-icons.html" class="submenu-link"
>Bootstrap Icons
</a>
</li>
<li class="submenu-item">
<a href="ui-icons-fontawesome.html" class="submenu-link"
>Fontawesome</a
>
</li>
<li class="submenu-item">
<a href="ui-icons-dripicons.html" class="submenu-link"
>Dripicons</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-chart-chartjs.html" class="submenu-link"
>ChartJS</a
>
</li>
<li class="submenu-item">
<a href="ui-chart-apexcharts.html" class="submenu-link"
>Apexcharts</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="ui-file-uploader.html" class="sidebar-link">
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-map-google-map.html" class="submenu-link"
>Google Map</a
>
</li>
<li class="submenu-item">
<a href="ui-map-jsvectormap.html" class="submenu-link"
>JS Vector Map</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-three-dots"></i>
<span>Multi-level Menu</span>
</a>
<ul class="submenu">
<li class="submenu-item has-sub">
<a href="#" class="submenu-link">First Level</a>
<ul class="submenu submenu-level-2">
<li class="submenu-item">
<a href="ui-multi-level-menu.html" class="submenu-link"
>Second Level</a
>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">Second Level Menu</a>
</li>
</ul>
</li>
<li class="submenu-item has-sub">
<a href="#" class="submenu-link">Another Menu</a>
<ul class="submenu submenu-level-2">
<li class="submenu-item">
<a href="#" class="submenu-link">Second Level Menu</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li class="sidebar-item">
<a href="application-email.html" class="sidebar-link">
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-chat.html" class="sidebar-link">
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-gallery.html" class="sidebar-link">
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-checkout.html" class="sidebar-link">
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="auth-login.html" class="submenu-link">Login</a>
</li>
<li class="submenu-item">
<a href="auth-register.html" class="submenu-link"
>Register</a
>
</li>
<li class="submenu-item">
<a href="auth-forgot-password.html" class="submenu-link"
>Forgot Password</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="error-403.html" class="submenu-link">403</a>
</li>
<li class="submenu-item">
<a href="error-404.html" class="submenu-link">404</a>
</li>
<li class="submenu-item">
<a href="error-500.html" class="submenu-link">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li class="sidebar-item">
<a
href="https://zuramai.github.io/mazer/docs"
class="sidebar-link"
>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li class="sidebar-item">
<a
href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md"
class="sidebar-link"
>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li class="sidebar-item">
<a
href="https://github.com/zuramai/mazer#donation"
class="sidebar-link"
>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Modal</h3>
<p class="text-subtitle text-muted">
Use Bootstrap’s JavaScript modal plugin to add dialogs to your
site for lightboxes, user notifications, or completely custom
content.
</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav
aria-label="breadcrumb"
class="breadcrumb-header float-start float-lg-end"
>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Dashboard</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Modal
</li>
</ol>
</nav>
</div>
</div>
</div>
<section id="basic-modals">
<div class="row">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic Modal</h4>
</div>
<div class="card-body">
<p>
Toggle a modal via JavaScript by clicking the button
above. You can use modal to add dialogs to your site for
lightboxes, user notifications, or completely custom
content.
</p>
<!-- Button trigger for basic modal -->
<button
type="button"
class="btn btn-outline-primary block"
data-bs-toggle="modal"
data-bs-target="#default"
>
Launch Modal
</button>
<!--Basic Modal -->
<div
class="modal fade text-left"
id="default"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel1"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel1">
Basic Modal
</h5>
<button
type="button"
class="close rounded-pill"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Bonbon caramels muffin. Chocolate bar oat cake
cookie pastry dragée pastry. Carrot cake chocolate
tootsie roll chocolate bar candy canes biscuit.
Gummies bonbon apple pie fruitcake icing biscuit
apple pie jelly-o sweet roll. Toffee sugar plum
sugar plum jelly-o jujubes bonbon dessert carrot
cake. Cookie dessert tart muffin topping donut
icing fruitcake. Sweet roll cotton candy dragée
danish Candy canes chocolate bar cookie.
Gingerbread apple pie oat cake. Carrot cake
fruitcake bear claw. Pastry gummi bears
marshmallow jelly-o.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Borderless Modal</h4>
</div>
<div class="card-body">
<p>
Toggle a Boderless via JavaScript by clicking the button
above. Use
<code>.modal-borderless</code>
with <code>.modal</code>for BorderLess modal.
</p>
<!-- Button trigger for BorderLess Modal -->
<button
type="button"
class="btn btn-outline-primary block"
data-bs-toggle="modal"
data-bs-target="#border-less"
>
Launch Modal
</button>
<!--BorderLess Modal Modal -->
<div
class="modal fade text-left modal-borderless"
id="border-less"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel1"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Border-Less</h5>
<button
type="button"
class="close rounded-pill"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Bonbon caramels muffin. Chocolate bar oat cake
cookie pastry dragée pastry. Carrot cake chocolate
tootsie roll chocolate bar candy canes biscuit.
Gummies bonbon apple pie fruitcake icing biscuit
apple pie jelly-o sweet roll. Toffee sugar plum
sugar plum jelly-o jujubes bonbon dessert carrot
cake. Cookie dessert tart muffin topping donut
icing fruitcake. Sweet roll cotton candy dragée
danish Candy canes chocolate bar cookie.
Gingerbread apple pie oat cake. Carrot cake
fruitcake bear claw. Pastry gummi bears
marshmallow jelly-o.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-primary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Vertically Centered</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add <code>.modal-dialog-centered</code> to
<code>.modal-dialog</code> to vertically center the
modal.
</p>
<!-- button trigger for Vertically Centered modal -->
<button
type="button"
class="btn btn-outline-primary block"
data-bs-toggle="modal"
data-bs-target="#exampleModalCenter"
>
Launch Modal
</button>
<!-- Vertically Centered modal Modal -->
<div
class="modal fade"
id="exampleModalCenter"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h5
class="modal-title"
id="exampleModalCenterTitle"
>
Vertically Centered
</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Croissant jelly-o halvah chocolate sesame snaps.
Brownie caramels candy canes chocolate cake
marshmallow icing lollipop I love. Gummies
macaroon donut caramels biscuit topping danish.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Disabled Backdrop</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
You can disable the backdrop by using
<code>data-bs-backdrop="false"</code>
</p>
<!-- Button trigger for Disabled Backdrop -->
<button
type="button"
class="btn btn-outline-primary block"
data-bs-toggle="modal"
data-bs-target="#backdrop"
>
Launch Modal
</button>
<!--Disabled Backdrop Modal -->
<div
class="modal fade text-left"
id="backdrop"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel4"
data-bs-backdrop="false"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel4">
Disabled Backdrop
</h4>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Candy oat cake topping topping chocolate cake.
Icing pudding jelly beans I love chocolate
carrot cake wafer candy canes. Biscuit croissant
fruitcake bonbon soufflé.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Basic Modals end -->
<!-- Modal Themes start -->
<section id="modal-themes">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Modal Themes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p class="mb-1">
Use class <code>.bg-*</code> with your
<code>.modal-header</code> to change theme of modal
</p>
<div class="row">
<div class="col-12">
<div class="modal-primary me-1 mb-1 d-inline-block">
<!-- Button trigger for primary themes modal -->
<button
type="button"
class="btn btn-outline-primary"
data-bs-toggle="modal"
data-bs-target="#primary"
>
Primary
</button>
<!--primary theme Modal -->
<div
class="modal fade text-left"
id="primary"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel160"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header bg-primary">
<h5
class="modal-title white"
id="myModalLabel160"
>
Primary Modal
</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate
toffee chocolate bar icing. Pudding jelly
beans carrot cake pastry gummies cheesecake
lollipop. I love cookie lollipop cake I love
sweet gummi bears cupcake dessert.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block"
>Close</span
>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i
class="bx bx-check d-block d-sm-none"
></i>
<span class="d-none d-sm-block"
>Accept</span
>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-success me-1 mb-1 d-inline-block">
<!-- Button trigger for Success theme modal -->
<button
type="button"
class="btn btn-outline-success"
data-bs-toggle="modal"
data-bs-target="#success"
>
Success
</button>
<!--Success theme Modal -->
<div
class="modal fade text-left"
id="success"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel110"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header bg-success">
<h5
class="modal-title white"
id="myModalLabel110"
>
Success Modal
</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate
toffee chocolate bar icing. Pudding jelly
beans carrot cake pastry gummies cheesecake
lollipop. I love cookie lollipop cake I love
sweet gummi bears cupcake dessert.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block"
>Close</span
>
</button>
<button
type="button"
class="btn btn-success ms-1"
data-bs-dismiss="modal"
>
<i
class="bx bx-check d-block d-sm-none"
></i>
<span class="d-none d-sm-block"
>Accept</span
>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-danger me-1 mb-1 d-inline-block">
<!-- Button trigger for danger theme modal -->
<button
type="button"
class="btn btn-outline-danger"
data-bs-toggle="modal"
data-bs-target="#danger"
>
Danger
</button>
<!--Danger theme Modal -->
<div
class="modal fade text-left"
id="danger"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel120"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header bg-danger">
<h5
class="modal-title white"
id="myModalLabel120"
>
Danger Modal
</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate
toffee chocolate bar icing. Pudding jelly
beans carrot cake pastry gummies cheesecake
lollipop. I love cookie lollipop cake I love
sweet gummi bears cupcake dessert.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block"
>Close</span
>
</button>
<button
type="button"
class="btn btn-danger ms-1"
data-bs-dismiss="modal"
>
<i
class="bx bx-check d-block d-sm-none"
></i>
<span class="d-none d-sm-block"
>Accept</span
>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-info me-1 mb-1 d-inline-block">
<!-- Button trigger for info theme modal -->
<button
type="button"
class="btn btn-outline-info"
data-bs-toggle="modal"
data-bs-target="#info"
>
Info
</button>
<!--info theme Modal -->
<div
class="modal fade text-left"
id="info"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel130"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header bg-info">
<h5
class="modal-title white"
id="myModalLabel130"
>
Info Modal
</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate
toffee chocolate bar icing. Pudding jelly
beans carrot cake pastry gummies cheesecake
lollipop. I love cookie lollipop cake I love
sweet gummi bears cupcake dessert.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block"
>Close</span
>
</button>
<button
type="button"
class="btn btn-info ms-1"
data-bs-dismiss="modal"
>
<i
class="bx bx-check d-block d-sm-none"
></i>
<span class="d-none d-sm-block"
>Accept</span
>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-warning me-1 mb-1 d-inline-block">
<!-- Button trigger for warning theme modal -->
<button
type="button"
class="btn btn-outline-warning"
data-bs-toggle="modal"
data-bs-target="#warning"
>
Warning
</button>
<!--warning theme Modal -->
<div
class="modal fade text-left"
id="warning"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel140"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header bg-warning">
<h5
class="modal-title white"
id="myModalLabel140"
>
Warning Modal
</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate
toffee chocolate bar icing. Pudding jelly
beans carrot cake pastry gummies cheesecake
lollipop. I love cookie lollipop cake I love
sweet gummi bears cupcake dessert.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block"
>Close</span
>
</button>
<button
type="button"
class="btn btn-warning ms-1"
data-bs-dismiss="modal"
>
<i
class="bx bx-check d-block d-sm-none"
></i>
<span class="d-none d-sm-block"
>Accept</span
>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-dark me-1 mb-1 d-inline-block">
<!-- Button trigger for dark modal -->
<button
type="button"
class="btn btn-outline-dark"
data-bs-toggle="modal"
data-bs-target="#dark"
>
Dark
</button>
<!--Dark theme Modal -->
<div
class="modal fade text-left"
id="dark"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel150"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header bg-dark white">
<span
class="modal-title"
id="myModalLabel150"
>Dark Modal</span
>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Tart lemon drops macaroon oat cake chocolate
toffee chocolate bar icing. Pudding jelly
beans carrot cake pastry gummies cheesecake
lollipop. I love cookie lollipop cake I love
sweet gummi bears cupcake dessert.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block"
>Close</span
>
</button>
<button
type="button"
class="btn btn-dark ms-1"
data-bs-dismiss="modal"
>
<i
class="bx bx-check d-block d-sm-none"
></i>
<span class="d-none d-sm-block"
>Accept</span
>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal Themes end -->
<!-- Modal Sizes start -->
<section id="modal-sizes">
<div class="card">
<div class="card-header">
<h4 class="card-title">Modal Sizes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add class <code>.modal-{sm|lg|xl|full}</code> with
<code>.modal-dialog</code> to create a modal with different
size.
</p>
<div class="row">
<div class="col-12">
<!--Modal sm size -->
<div class="me-1 mb-1 d-inline-block">
<!-- Button trigger for small size modal modal -->
<button
type="button"
class="btn btn-outline-warning"
data-bs-toggle="modal"
data-bs-target="#small"
>
Small Modal
</button>
<!--small size modal -->
<div
class="modal fade text-left"
id="small"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel19"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-sm"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel19">
Small Modal
</h4>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Biscuit chocolate cake gummies. Lollipop I love
macaroon bear claw caramels. I love marshmallow
tiramisu I love fruitcake I love gummi bears.
Carrot cake topping liquorice. Pudding caramels
liquorice sweet I love. Donut powder cupcake ice
cream tootsie roll jelly.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary btn-sm"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-sm-block d-none">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1 btn-sm"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-sm-block d-none">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal default md size -->
<div class="me-1 mb-1 d-inline-block">
<!-- Button trigger for default modal -->
<button
type="button"
class="btn btn-outline-warning"
data-bs-toggle="modal"
data-bs-target="#defaultSize"
>
Default Modal
</button>
<!--Default size Modal -->
<div
class="modal fade text-left"
id="defaultSize"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel18"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel18">
Default Modal
</h4>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
I love candy candy cake powder I love icing ice
cream pastry. Biscuit lemon drops sesame snaps.
Topping biscuit croissant gummi bears jelly
beans cake cake bear claw muffin. Lemon drops
oat cake pastry bear claw liquorice lemon drops.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal lg size -->
<div class="me-1 mb-1 d-inline-block">
<!-- Button trigger for large size modal -->
<button
type="button"
class="btn btn-outline-warning"
data-bs-toggle="modal"
data-bs-target="#large"
>
Large Modal
</button>
<!--large size Modal -->
<div
class="modal fade text-left"
id="large"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel17"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel17">
Large Modal
</h4>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
I love tart cookie cupcake. I love chupa chups
biscuit. I love marshmallow apple pie wafer
liquorice. Marshmallow cotton candy chocolate.
Apple pie muffin tart. Marshmallow halvah pie
marzipan lemon drops jujubes. Macaroon sugar
plum cake icing toffee.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal Xl size -->
<div class="me-1 mb-1 d-inline-block">
<!-- Button trigger for Extra Large modal -->
<button
type="button"
class="btn btn-outline-warning"
data-bs-toggle="modal"
data-bs-target="#xlarge"
>
Extra Large Modal
</button>
<!--Extra Large Modal -->
<div
class="modal fade text-left w-100"
id="xlarge"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel16"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel16">
Extra Large Modal
</h4>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Cake cupcake sugar plum. Sesame snaps pudding
cupcake candy canes icing cheesecake. Sweet roll
pudding lollipop apple pie gummies dragée.
Chocolate bar cookie caramels I love lollipop
ice cream tiramisu lollipop sweet.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal full size -->
<div class="me-1 mb-1 d-inline-block">
<!-- Button trigger for full size modal -->
<button
type="button"
class="btn btn-outline-warning"
data-bs-toggle="modal"
data-bs-target="#full-scrn"
>
Full Screen Modal
</button>
<!-- full size modal-->
<div
class="modal fade text-left w-100"
id="full-scrn"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel20"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-full"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel20">
Full Screen Modal
</h4>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
Cake cupcake sugar plum. Sesame snaps pudding
cupcake candy canes icing cheesecake. Sweet roll
pudding lollipop apple pie gummies dragée.
Chocolate bar cookie caramels I love lollipop
ice cream tiramisu lollipop sweet.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal Sizes end -->
<!-- Form and scrolling Components start -->
<section id="form-and-scrolling-components">
<div class="row">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-content">
<div class="card-body">
<div class="form-group">
<h4 class="card-title">Modal with Login Form</h4>
<p>Created Simple Login Form.</p>
<!-- Button trigger for login form modal -->
<button
type="button"
class="btn btn-outline-success"
data-bs-toggle="modal"
data-bs-target="#inlineForm"
>
Launch Modal
</button>
<!--login form Modal -->
<div
class="modal fade text-left"
id="inlineForm"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel33"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel33">
Login Form
</h4>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<form action="#">
<div class="modal-body">
<label for="email">Email: </label>
<div class="form-group">
<input
id="email"
type="text"
placeholder="Email Address"
class="form-control"
/>
</div>
<label for="password">Password: </label>
<div class="form-group">
<input
id="password"
type="password"
placeholder="Password"
class="form-control"
/>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i
class="bx bx-check d-block d-sm-none"
></i>
<span class="d-none d-sm-block">login</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Scrolling long Content</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
If your content is longer you the page will autmatically
adopt a scrollbar
</p>
<!-- Button trigger for scrollbar modal -->
<button
type="button"
class="btn btn-outline-success"
data-bs-toggle="modal"
data-bs-target="#exampleModalLong"
>
Launch demo modal
</button>
<!--scrollbar Modal -->
<div
class="modal fade"
id="exampleModalLong"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLongTitle"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5
class="modal-title"
id="exampleModalLongTitle"
>
Scrolling Modal
</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Biscuit powder jelly beans. Lollipop candy canes
croissant icing chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love
caramels caramels halvah chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie.
Cheesecake jujubes lemon drops danish dessert I
love caramels powder.
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee
donut sweet roll cake. Cupcake dessert icing
dragée dessert. Liquorice jujubes cake tart pie
donut. Cotton candy candy canes lollipop
liquorice chocolate marzipan muffin pie
liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream.
Candy canes I love powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping
biscuit. Lemon drops apple pie sesame snaps
tootsie roll carrot cake soufflé halvah. Biscuit
powder jelly beans. Lollipop candy canes
croissant icing chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love
caramels caramels halvah chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie.
Cheesecake jujubes lemon drops danish dessert I
love caramels powder
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee
donut sweet roll cake. Cupcake dessert icing
dragée dessert. Liquorice jujubes cake tart pie
donut. Cotton candy candy canes lollipop
liquorice chocolate marzipan muffin pie
liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream.
Candy canes I love powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping
biscuit. Lemon drops apple pie sesame snaps
tootsie roll carrot cake soufflé halvah. Biscuit
powder jelly beans. Lollipop candy canes
croissant icing chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love
caramels caramels halvah chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie.
Cheesecake jujubes lemon drops danish dessert I
love caramels powder.
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee
donut sweet roll cake. Cupcake dessert icing
dragée dessert. Liquorice jujubes cake tart pie
donut. Cotton candy candy canes lollipop
liquorice chocolate marzipan muffin pie
liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream.
Candy canes I love powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping
biscuit. Lemon drops apple pie sesame snaps
tootsie roll carrot cake soufflé halvah. Biscuit
powder jelly beans. Lollipop candy canes
croissant icing chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love
caramels caramels halvah chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie.
Cheesecake jujubes lemon drops danish dessert I
love caramels powder.
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee
donut sweet roll cake. Cupcake dessert icing
dragée dessert. Liquorice jujubes cake tart pie
donut. Cotton candy candy canes lollipop
liquorice chocolate marzipan muffin pie
liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream.
Candy canes I love powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping
biscuit. Lemon drops apple pie sesame snaps
tootsie roll carrot cake soufflé halvah.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">
Scrolling long Content Inside Modal
</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
You can also create a scrollable modal that allows
scroll the modal body by adding
<code>.modal-dialog-scrollable</code> to
<code>.modal-dialog</code>.
</p>
<!-- Button trigger for scrolling content modal -->
<button
type="button"
class="btn btn-outline-success"
data-bs-toggle="modal"
data-bs-target="#exampleModalScrollable"
>
Launch demo modal
</button>
<!--scrolling content Modal -->
<div
class="modal fade"
id="exampleModalScrollable"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalScrollableTitle"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h5
class="modal-title"
id="exampleModalScrollableTitle"
>
Scrolling long Content
</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Biscuit powder jelly beans. Lollipop candy canes
croissant icing chocolate cake. Cake fruitcake
powder pudding pastry
</p>
<p>
Tootsie roll oat cake I love bear claw I love
caramels caramels halvah chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie.
Cheesecake jujubes lemon drops danish dessert I
love caramels powder
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee
donut sweet roll cake. Cupcake dessert icing
dragée dessert. Liquorice jujubes cake tart pie
donut. Cotton candy candy canes lollipop
liquorice chocolate marzipan muffin pie
liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream.
Candy canes I love powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping
biscuit. Lemon drops apple pie sesame snaps
tootsie roll carrot cake soufflé halvah. Biscuit
powder jelly beans. Lollipop candy canes
croissant icing chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love
caramels caramels halvah chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie.
Cheesecake jujubes lemon drops danish dessert I
love caramels powder.
</p>
<p>
dragée dessert. Liquorice jujubes cake tart pie
donut. Cotton candy candy canes lollipop
liquorice chocolate marzipan muffin pie
liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream.
Candy canes I love powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping
biscuit. Lemon drops apple pie sesame snaps
tootsie roll carrot cake soufflé halvah.Biscuit
powder jelly beans. Lollipop candy canes
croissant icing chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love
caramels caramels halvah chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie.
Cheesecake jujubes lemon drops danish dessert I
love caramels powder.
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee
donut sweet roll cake. Cupcake dessert icing
dragée dessert. Liquorice jujubes cake tart pie
donut. Cotton candy candy canes lollipop
liquorice chocolate marzipan muffin pie
liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream.
Candy canes I love powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping
biscuit. Lemon drops apple pie sesame snaps
tootsie roll carrot cake soufflé halvah. Biscuit
powder jelly beans. Lollipop candy canes
croissant icing chocolate cake. Cake fruitcake
powder pudding pastry.
</p>
<p>
Tootsie roll oat cake I love bear claw I love
caramels caramels halvah chocolate bar. Cotton
candy gummi bears pudding pie apple pie cookie.
Cheesecake jujubes lemon drops danish dessert I
love caramels powder.
</p>
<p>
Chocolate cake icing tiramisu liquorice toffee
donut sweet roll cake. Cupcake dessert icing
dragée dessert. Liquorice jujubes cake tart pie
donut. Cotton candy candy canes lollipop
liquorice chocolate marzipan muffin pie
liquorice.
</p>
<p>
Powder cookie jelly beans sugar plum ice cream.
Candy canes I love powder sugar plum tiramisu.
Liquorice pudding chocolate cake cupcake topping
biscuit. Lemon drops apple pie sesame snaps
tootsie roll carrot cake soufflé halvah.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Disabled Animation</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
For modals that simply appear rather than fade in to
view, remove the <code>.fade</code>
class from your modal markup.
</p>
<!-- Button trigger for disabled animation modal -->
<button
type="button"
class="btn btn-outline-success"
data-bs-toggle="modal"
data-bs-target="#animation"
>
Launch demo modal
</button>
<!-- disabled animation Modal -->
<div
class="modal text-left"
id="animation"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel6"
aria-hidden="true"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel6">
Disabled Animation
</h4>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<p>
Chocolate bar jelly dragée cupcake chocolate bar
I love donut liquorice. Powder I love marzipan
donut candy canes jelly-o. Dragée liquorice
apple pie candy biscuit danish lemon drops sugar
plum.
</p>
<div class="alert bg-rgba-success" role="alert">
<span class="text-bold-600">Well done!</span>
You successfully read this important alert
message.
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light-secondary"
data-bs-dismiss="modal"
>
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button
type="button"
class="btn btn-primary ms-1"
data-bs-dismiss="modal"
>
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Form and scrolling Components end -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2023 © Mazer</p>
</div>
<div class="float-end">
<p>
Crafted with
<span class="text-danger"
><i class="bi bi-heart-fill icon-mid"></i
></span>
by <a href="https://saugi.me">Saugi</a>
</p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/static/js/components/dark.js"></script>
<script src="assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/compiled/js/app.js"></script>
</body>
</html>