senlinai/site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d2a3d601839fa53bc2808502db315ac81625026f
site/res/templates/ui-modals.html
yanweidonog 530f1d833d dev
2025-12-27 21:59:58 +08:00

2518 lines
143 KiB
HTML
Raw Blame History

{{template "components/header.html" .}}
{{template "components/preloader.html" .}}
<div id="main-wrapper">
<!-- Sidebar Start -->
{{template "components/sidebar.html" .}}
<!-- Sidebar End -->
<div class="page-wrapper">
<!-- Header Start -->
{{template "components/topbar.html" .}}
<!-- Header End -->
<div class="body-wrapper">
<div class="container-fluid">
<div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
<div class="card-body px-4 py-3">
<div class="row align-items-center">
<div class="col-9">
<h4 class="fw-semibold mb-8">Modals</h4>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a class="text-muted text-decoration-none" href="../main/index.html">Home</a>
</li>
<li class="breadcrumb-item" aria-current="page">Modals</li>
</ol>
</nav>
</div>
<div class="col-3">
<div class="text-center mb-n5">
<img src="../assets/images/breadcrumb/ChatBc.png" alt="modernize-img" class="img-fluid mb-n4" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<!-- start Modal Sizes -->
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Modal Sizes</h4>
<div class="d-md-flex button-group">
<div>
<!-- ------------------------------------------ -->
<!-- Extra Large -->
<!-- ------------------------------------------ -->
<button class="btn me-1 mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bs-example-modal-xlg">
Extra Large Modal
</button>
<!-- sample modal content -->
<div class="modal fade" id="bs-example-modal-xlg" tabindex="-1" aria-labelledby="bs-example-modal-lg" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myLargeModalLabel">
Extra Large modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>
Overflowing text to show scroll behavior
</h4>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<div>
<!-- ------------------------------------------ -->
<!-- Large -->
<!-- ------------------------------------------ -->
<button class="btn me-1 mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bs-example-modal-lg">
Large Modal
</button>
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" aria-labelledby="bs-example-modal-lg" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myLargeModalLabel">
Large modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>
Overflowing text to show scroll behavior
</h4>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<div>
<!-- ------------------------------------------ -->
<!-- Medium -->
<!-- ------------------------------------------ -->
<button class="btn me-1 mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bs-example-modal-md">
Medium Modal
</button>
<!-- sample modal content -->
<div id="bs-example-modal-md" class="modal fade" tabindex="-1" aria-labelledby="bs-example-modal-md" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myModalLabel">
Medium Modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>
Overflowing text to show scroll behavior
</h4>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<div>
<!-- ------------------------------------------ -->
<!-- Small -->
<!-- ------------------------------------------ -->
<button class="btn me-1 mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bs-example-modal-sm">
Small Modal
</button>
<!-- sample modal content -->
<div class="modal fade" id="bs-example-modal-sm" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myModalLabel">
Small Modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>
Overflowing text to show scroll behavior
</h4>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
</div>
</div>
<!-- end Modal Sizes -->
<!-- start Modal Types -->
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Modal Types</h4>
<div class="button-group">
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myLargeModalLabel">
Static backdrop Modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>Overflowing text to show scroll behavior</h4>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#scroll-long-outer-modal">
Scroll Long Outer Modal
</button>
<!-- Modal -->
<div class="modal fade" id="scroll-long-outer-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="scroll-long-outer-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myLargeModalLabel">
Scroll Long Outer Modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>Overflowing text to show scroll behavior</h4>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#scroll-long-inner-modal">
Scroll Long Inner Modal
</button>
<!-- Modal -->
<div class="modal fade" id="scroll-long-inner-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="scroll-long-inner-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myLargeModalLabel">
Scroll Long Inner Modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>Overflowing text to show scroll behavior</h4>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#with-grid-modal">
With Grid Modal
</button>
<!-- Modal -->
<div class="modal fade" id="with-grid-modal" tabindex="-1" aria-labelledby="scroll-long-inner-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myLargeModalLabel">
With Grid Modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row border mt-3">
<div class="col-md-4 border-end bg-light py-3">
.col-md-4
</div>
<div class="col-md-4 ms-auto bg-light py-3">
.col-md-4 .ms-auto
</div>
</div>
<div class="row border mt-3">
<div class="col-md-3 ms-auto bg-light border-end py-3">
.col-md-3 .ms-auto
</div>
<div class="col-md-2 ms-auto bg-light py-3">
.col-md-2 .ms-auto
</div>
</div>
<div class="row border mt-3">
<div class="col-md-6 ms-auto bg-light py-3">
.col-md-6 .ms-auto
</div>
</div>
<div class="row border mt-3">
<div class="col-sm-9 border-end bg-light">
<div class="py-3">Level 1: .col-sm-9</div>
<div class="row border-top">
<div class="col-8 col-sm-6 py-3 border-end">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6 py-3">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#vertical-center-modal">
Vertically centered Modal
</button>
<!-- Vertically centered modal -->
<div class="modal fade" id="vertical-center-modal" tabindex="-1" aria-labelledby="vertical-center-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myLargeModalLabel">
Vertically centered Modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>Overflowing text to show scroll behavior</h4>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#vertical-center-scroll-modal">
Vertically centered scrollable
</button>
<!-- Vertically centered modal -->
<div class="modal fade" id="vertical-center-scroll-modal" tabindex="-1" aria-labelledby="vertical-center-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myLargeModalLabel">
Vertically centered scrollable Modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>Overflowing text to show scroll behavior</h4>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#pop-tool-modal">
Tooltip & Popover Modal
</button>
<!-- Vertically centered modal -->
<div class="modal fade" id="pop-tool-modal" tabindex="-1" aria-labelledby="vertical-center-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="myLargeModalLabel">
Tooltip & Popover Modal
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>
This
<a href="javascript:void(0)" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a>
triggers a popover on click.
</p>
<hr />
<h5>Tooltips in a modal</h5>
<p>
<a href="javascript:void(0)" class="tooltip-test" title="Tooltip">This link</a>
and
<a href="javascript:void(0)" class="tooltip-test" title="Tooltip">that link</a>
have tooltips on hover.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end Modal Types -->
</div>
<div class="col-md-6">
<!-- start Varying Modal content -->
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Varying Modal content</h4>
<!-- sample modal content -->
<div class="button-group">
<button type="button" class="btn mb-1 px-4 fs-4 bg-primary-subtle text-primary" data-bs-toggle="modal" data-bs-target="#samedata-modal" data-bs-whatever="@mdo">
Open modal for @mdo
</button>
<button type="button" class="btn mb-1 px-4 fs-4 bg-success-subtle text-success" data-bs-toggle="modal" data-bs-target="#samedata-modal" data-bs-whatever="@fat">
Open modal for @fat
</button>
<button type="button" class="btn mb-1 px-4 fs-4 bg-warning-subtle text-warning" data-bs-toggle="modal" data-bs-target="#samedata-modal" data-bs-whatever="@getbootstrap">
Open modal for @getbootstrap
</button>
</div>
<div class="modal fade" id="samedata-modal" tabindex="-1" aria-labelledby="exampleModalLabel1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="exampleModalLabel1">
New message
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="">Recipient:</label>
<input type="text" class="form-control" id="recipient-name1" />
</div>
<div class="mb-3">
<label for="message-text" class="">Message:</label>
<textarea class="form-control" id="message-text1"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-success">
Send message
</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
</div>
</div>
<!-- end Varying Modal content -->
</div>
<div class="col-md-6">
<!-- start Custom Modal -->
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Custom Modal</h4>
<div class="button-group">
<!-- Signup modal content -->
<div id="signup-modal" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="text-center mt-2 mb-4">
<a href="../main/index.html" class="text-success">
<span>
<img src="../assets/images/logos/favicon.png" class="me-3 img-fluid" alt="modernize-img" />
</span>
</a>
</div>
<form class="ps-3 pr-3" action="#">
<div class="mb-3">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty" />
</div>
<div class="mb-3">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com" />
</div>
<div class="mb-3">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password" />
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck1" />
<label class="form-check-label" for="customCheck1">I accept
<a href="javascript:void(0)">Terms and Conditions</a>
</label>
</div>
</div>
<div class="mb-3 text-center">
<button class="btn bg-info-subtle text-info " type="submit">
Sign Up Free
</button>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Custom width modal -->
<button type="button" class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#signup-modal">
<i class="ti ti-lock fs-5 text-center d-block"></i>
Sign Up Modal
</button>
<!-- SignIn modal content -->
<div id="login-modal" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="text-center mt-2 mb-4">
<a href="../main/index.html" class="text-success">
<span>
<img src="../assets/images/logos/favicon.png" class="me-3 img-fluid" alt="modernize-img" />
</span>
</a>
</div>
<form action="#" class="ps-3 pr-3">
<div class="mb-3">
<label for="emailaddress1">Email address</label>
<input class="form-control" type="email" id="emailaddress1" required="" placeholder="john@deo.com" />
</div>
<div class="mb-3">
<label for="password1">Password</label>
<input class="form-control" type="password" required="" id="password1" placeholder="Enter your password" />
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck2" />
<label class="form-check-label" for="customCheck2">Remember me</label>
</div>
</div>
<div class="mb-3 text-center">
<button class="btn btn-rounded bg-info-subtle text-info " type="submit">
Sign In
</button>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Full width modal -->
<button type="button" class="btn bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#login-modal">
<i class="ti ti-login fs-5 text-center d-block"></i>
Log in Modal
</button>
</div>
</div>
</div>
<!-- end Custom Modal -->
</div>
<div class="col-12">
<!-- start Fullscreen Modal -->
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Fullscreen Modal</h4>
<div class="button-group">
<!-- ------------------------------------------ -->
<!-- Fullscreen -->
<!-- ------------------------------------------ -->
<button class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bs-fullscreen">
Fullscreen Modal
</button>
<div class="modal fade" id="bs-fullscreen" tabindex="-1" aria-labelledby="bs-example-modal-lg" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">
Full screen modal
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- ------------------------------------------ -->
<!-- Fullscreen -->
<!-- ------------------------------------------ -->
<button class="btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bs-fullscreen-down-sm">
Fullscreen Below sm Modal
</button>
<div class="modal fade" id="bs-fullscreen-down-sm" tabindex="-1" aria-labelledby="bs-example-modal-lg" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">
Full screen below sm modal
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- ------------------------------------------ -->
<!-- Fullscreen -->
<!-- ------------------------------------------ -->
<button class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bs-fullscreen-down-md">
Fullscreen Below md Modal
</button>
<div class="modal fade" id="bs-fullscreen-down-md" tabindex="-1" aria-labelledby="bs-example-modal-lg" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">
Full screen below md modal
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- ------------------------------------------ -->
<!-- Fullscreen -->
<!-- ------------------------------------------ -->
<button class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bs-fullscreen-down-lg">
Fullscreen Below lg Modal
</button>
<div class="modal fade" id="bs-fullscreen-down-lg" tabindex="-1" aria-labelledby="bs-example-modal-lg" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">
Full screen below lg modal
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- ------------------------------------------ -->
<!-- Fullscreen -->
<!-- ------------------------------------------ -->
<button class="btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bs-fullscreen-down-xl">
Fullscreen Below xl Modal
</button>
<div class="modal fade" id="bs-fullscreen-down-xl" tabindex="-1" aria-labelledby="bs-example-modal-xl" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-xl-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">
Full screen below xl modal
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- ------------------------------------------ -->
<!-- Fullscreen -->
<!-- ------------------------------------------ -->
<button class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bs-fullscreen-down-xxl">
Fullscreen Below xxl Modal
</button>
<div class="modal fade" id="bs-fullscreen-down-xxl" tabindex="-1" aria-labelledby="bs-example-modal-xxl" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-xxl-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">
Full screen below xxl modal
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
</div>
</div>
<!-- end Fullscreen Modal -->
</div>
<div class="col-md-6">
<!-- start Modal Header Coloured -->
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Modal Header Coloured</h4>
<div class="button-group">
<!-- Primary header modal -->
<button type="button" class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#primary-header-modal">
Primary Header
</button>
<!-- Primary Header Modal -->
<div id="primary-header-modal" class="modal fade" tabindex="-1" aria-labelledby="primary-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-primary text-white">
<h4 class="modal-title text-white" id="primary-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0">Primary Background</h5>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn bg-primary-subtle text-primary ">
Save changes
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- info header modal -->
<button type="button" class="btn mb-1 bg-info-subtle text-info px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#info-header-modal">
Info Header
</button>
<!-- info Header Modal -->
<div id="info-header-modal" class="modal fade" tabindex="-1" aria-labelledby="info-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-info text-white">
<h4 class="modal-title text-white" id="info-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0">Info Background</h5>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn bg-info-subtle text-info ">
Save changes
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- danger header modal -->
<button type="button" class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#danger-header-modal">
Danger Header
</button>
<!-- danger Header Modal -->
<div id="danger-header-modal" class="modal fade" tabindex="-1" aria-labelledby="danger-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-danger text-white">
<h4 class="modal-title text-white" id="danger-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0">Danger Background</h5>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn bg-danger-subtle text-danger ">
Save changes
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- warning header modal -->
<button type="button" class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#warning-header-modal">
Warning Header
</button>
<!-- warning Header Modal -->
<div id="warning-header-modal" class="modal fade" tabindex="-1" aria-labelledby="warning-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-warning text-white">
<h4 class="modal-title text-white" id="warning-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0">Warning Background</h5>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn bg-warning-subtle text-warning ">
Save changes
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- success header modal -->
<button type="button" class="btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#success-header-modal">
Success Header
</button>
<!-- success Header Modal -->
<div id="success-header-modal" class="modal fade" tabindex="-1" aria-labelledby="success-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-success text-white">
<h4 class="modal-title text-white" id="success-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0">Success Background</h5>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn bg-success-subtle text-success ">
Save changes
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- dark header modal -->
<button type="button" class="btn mb-1 btn-dark px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#dark-header-modal">
Dark Header
</button>
<!-- dark Header Modal -->
<div id="dark-header-modal" class="modal fade" tabindex="-1" aria-labelledby="dark-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-dark">
<h4 class="modal-title text-white" id="dark-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0">Dark Background</h5>
<p>
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-dark">
Save changes
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
</div>
<!-- end Modal Header Coloured -->
</div>
<div class="col-md-6">
<!-- start Modal Filled Coloured -->
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Modal Filled Coloured</h4>
<div class="button-group">
<!-- Primary header modal -->
<button type="button" class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bg-primary-header-modal">
Primary Modal
</button>
<!-- Primary Header Modal -->
<div id="bg-primary-header-modal" class="modal fade" tabindex="-1" aria-labelledby="primary-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content modal-filled bg-primary">
<div class="modal-header modal-colored-header text-white">
<h4 class="modal-title text-white" id="primary-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0 text-white">
Primary Background
</h5>
<p class="text-white-50">
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p class="text-white-50">
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- info header modal -->
<button type="button" class="btn mb-1 bg-info-subtle text-info px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bg-info-header-modal">
Info Modal
</button>
<!-- info Header Modal -->
<div id="bg-info-header-modal" class="modal fade" tabindex="-1" aria-labelledby="info-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content modal-filled bg-info">
<div class="modal-header modal-colored-header text-white">
<h4 class="modal-title text-white id=" info-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0 text-white">Info Background</h5>
<p class="text-white-50">
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p class="text-white-50">
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- danger header modal -->
<button type="button" class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bg-danger-header-modal">
Danger Modal
</button>
<!-- danger Header Modal -->
<div id="bg-danger-header-modal" class="modal fade" tabindex="-1" aria-labelledby="danger-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content modal-filled bg-danger">
<div class="modal-header modal-colored-header text-white">
<h4 class="modal-title text-white" id="danger-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0 text-white">Danger Background</h5>
<p class="text-white-50">
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p class="text-white-50">
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- warning header modal -->
<button type="button" class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bg-warning-header-modal">
Warning Modal
</button>
<!-- warning Header Modal -->
<div id="bg-warning-header-modal" class="modal fade" tabindex="-1" aria-labelledby="warning-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content modal-filled bg-warning">
<div class="modal-header modal-colored-header text-white">
<h4 class="modal-title text-white" id="warning-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0 text-white">
Warning Background
</h5>
<p class="text-white-50">
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p class="text-white-50">
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- success header modal -->
<button type="button" class="btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bg-success-header-modal">
Success Modal
</button>
<!-- success Header Modal -->
<div id="bg-success-header-modal" class="modal fade" tabindex="-1" aria-labelledby="success-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content modal-filled bg-success">
<div class="modal-header modal-colored-header text-white">
<h4 class="modal-title text-white" id="success-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0 text-white">
Success Background
</h5>
<p class="text-white-50">
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p class="text-white-50">
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- dark header modal -->
<button type="button" class="btn mb-1 btn-dark px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#bg-dark-header-modal">
Dark Modal
</button>
<!-- dark Header Modal -->
<div id="bg-dark-header-modal" class="modal fade" tabindex="-1" aria-labelledby="dark-header-modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content modal-filled bg-dark">
<div class="modal-header modal-colored-header">
<h4 class="modal-title text-white" id="dark-header-modalLabel">
Modal Heading
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0 text-white">Dark Background</h5>
<p class="text-white-50">
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
<p class="text-white-50">
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
</div>
<!-- end Modal Filled Coloured -->
</div>
<div class="col-12">
<!-- start Modal Based Alerts -->
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4">Modal Based Alerts</h4>
<div class="button-group">
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#al-success-alert">
Success Alert
</button>
<!-- Vertically centered modal -->
<div class="modal fade" id="al-success-alert" tabindex="-1" aria-labelledby="vertical-center-modal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-filled bg-success-subtle text-success">
<div class="modal-body p-4">
<div class="text-center text-success">
<i class="ti ti-circle-check fs-7"></i>
<h4 class="mt-2">Well Done!</h4>
<p class="mt-3 text-success-50">
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam.
</p>
<button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">
Continue
</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-info-subtle text-info px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#al-info-alert">
Info Alert
</button>
<!-- Vertically centered modal -->
<div class="modal fade" id="al-info-alert" tabindex="-1" aria-labelledby="vertical-center-modal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-filled bg-info-subtle">
<div class="modal-body p-4">
<div class="text-center text-info">
<i class="ti ti-info-circle fs-7"></i>
<h4 class="mt-2">Heads up!</h4>
<p class="mt-3">
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam.
</p>
<button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">
Continue
</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#al-warning-alert">
Warning Alert
</button>
<!-- Vertically centered modal -->
<div class="modal fade" id="al-warning-alert" tabindex="-1" aria-labelledby="vertical-center-modal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-filled bg-warning-subtle">
<div class="modal-body p-4">
<div class="text-center text-warning">
<i class="ti ti-alert-octagon fs-7"></i>
<h4 class="mt-2">Incorrect Information</h4>
<p class="mt-3">
Cras mattis consectetur purus sit amet
fermentum.Cras justo odio, dapibus ac
facilisis in, egestas eget quam.
</p>
<button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">
Continue
</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal" data-bs-target="#al-danger-alert">
Danger Alert
</button>
<!-- Vertically centered modal -->
<div class="modal fade" id="al-danger-alert" tabindex="-1" aria-labelledby="vertical-center-modal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-filled bg-danger-subtle">
<div class="modal-body p-4">
<div class="text-center text-danger">
<i class="ti ti-hexagon-letter-x fs-7"></i>
<h4 class="mt-2">Oh snap!</h4>
<p class="mt-3">
Cras mattis consectetur purus sit amet
fermentum.Cras justo odio, dapibus ac
facilisis in, egestas eget quam.
</p>
<button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">
Continue
</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
</div>
</div>
</div>
<!-- end Modal Based Alerts -->
</div>
</div>
</div>
</div>
</div>
<!-- Search Bar -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content rounded-1">
<div class="modal-header border-bottom">
<input type="search" class="form-control fs-3" placeholder="Search here" id="search" />
<a href="javascript:void(0)" data-bs-dismiss="modal" class="lh-1">
<i class="ti ti-x fs-5 ms-3"></i>
</a>
</div>
<div class="modal-body message-body" data-simplebar="">
<h5 class="mb-0 fs-5 p-1">Quick Page Links</h5>
<ul class="list mb-0 py-2">
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Modern</span>
<span class="text-muted d-block">/dashboards/dashboard1</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Dashboard</span>
<span class="text-muted d-block">/dashboards/dashboard2</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Contacts</span>
<span class="text-muted d-block">/apps/contacts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Posts</span>
<span class="text-muted d-block">/apps/blog/posts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Detail</span>
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Shop</span>
<span class="text-muted d-block">/apps/ecommerce/shop</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Modern</span>
<span class="text-muted d-block">/dashboards/dashboard1</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Dashboard</span>
<span class="text-muted d-block">/dashboards/dashboard2</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Contacts</span>
<span class="text-muted d-block">/apps/contacts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Posts</span>
<span class="text-muted d-block">/apps/blog/posts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Detail</span>
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Shop</span>
<span class="text-muted d-block">/apps/ecommerce/shop</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Shopping Cart -->
<div class="offcanvas offcanvas-end shopping-cart" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header justify-content-between py-4">
<h5 class="offcanvas-title fs-5 fw-semibold" id="offcanvasRightLabel">
Shopping Cart
</h5>
<span class="badge bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
</div>
<div class="offcanvas-body h-100 px-4 pt-0" data-simplebar>
<ul class="mb-0">
<li class="pb-7">
<div class="d-flex align-items-center">
<img src="../assets/images/products/product-1.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
<div>
<h6 class="mb-1">Supreme toys cooker</h6>
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
<div class="d-flex align-items-center justify-content-between mt-2">
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
<div class="input-group input-group-sm w-50">
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add1">
-
</button>
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add1" value="1" />
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addo2">
+
</button>
</div>
</div>
</div>
</div>
</li>
<li class="pb-7">
<div class="d-flex align-items-center">
<img src="../assets/images/products/product-2.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
<div>
<h6 class="mb-1">Supreme toys cooker</h6>
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
<div class="d-flex align-items-center justify-content-between mt-2">
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
<div class="input-group input-group-sm w-50">
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add2">
-
</button>
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add2" value="1" />
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon34">
+
</button>
</div>
</div>
</div>
</div>
</li>
<li class="pb-7">
<div class="d-flex align-items-center">
<img src="../assets/images/products/product-3.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
<div>
<h6 class="mb-1">Supreme toys cooker</h6>
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
<div class="d-flex align-items-center justify-content-between mt-2">
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
<div class="input-group input-group-sm w-50">
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add3">
-
</button>
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add3" value="1" />
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon3">
+
</button>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="align-bottom">
<div class="d-flex align-items-center pb-7">
<span class="text-dark fs-3">Sub Total</span>
<div class="ms-auto">
<span class="text-dark fw-semibold fs-3">$2530</span>
</div>
</div>
<div class="d-flex align-items-center pb-7">
<span class="text-dark fs-3">Total</span>
<div class="ms-auto">
<span class="text-dark fw-semibold fs-3">$6830</span>
</div>
</div>
<a href="../main/eco-checkout.html" class="btn btn-outline-primary w-100">Go to shopping cart</a>
</div>
</div>
</div>
</div>
{{template "components/footer.html" .}}
Reference in New Issue View Git Blame Copy Permalink