<!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="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/vendors/bootstrap-icons/bootstrap-icons.css">
<link rel="stylesheet" href="assets/css/app.css">
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header">
<div class="d-flex justify-content-between">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.png" alt="Logo" srcset=""></a>
</div>
<div class="toggler">
<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-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item active">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">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">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</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">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">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">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">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-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">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">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">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">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">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">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">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">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">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">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</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">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">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">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">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#donate" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
<button class="sidebar-toggler btn x"><i data-feather="x"></i></button>
</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 ml-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-content">
<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 ml-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">
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 ml-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-backdrop="false" 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" 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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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>Email: </label>
<div class="form-group">
<input type="text" placeholder="Email Address"
class="form-control">
</div>
<label>Password: </label>
<div class="form-group">
<input 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 ml-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 ml-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 ml-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 ml-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>2021 © Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="http://ahmadsaugi.com">A. Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/mazer.js"></script>
</body>
</html>