<div id="myModal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6>Text in a modal</h6>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<hr>
<h6>Overflowing text to show scroll behavior</h6>
<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 btn-danger"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal content for the above example -->
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<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">
...
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="bs-example-modal-sm" tabindex="-1" role="dialog"
aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Full width modal content -->
<div id="full-width-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="fullWidthModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="fullWidthModalLabel">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6>Text in a modal</h6>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<hr>
<h6>Overflowing text to show scroll behavior</h6>
<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 btn-danger"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Long Content Scroll Modal -->
<div class="modal fade" id="scrollable-modal" tabindex="-1" role="dialog"
aria-labelledby="scrollableModalTitle" 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="scrollableModalTitle">Modal title</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 btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="button-group">
<!-- Standard modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Standard Modal</button>
<!-- Large modal -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal"
data-bs-target="#bs-example-modal-lg">Large modal</button>
<!-- Small modal -->
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#bs-example-modal-sm">Small modal</button>
<!-- Full width modal -->
<button type="button" class="btn btn-warning" data-bs-toggle="modal"
data-bs-target="#full-width-modal">Full screen modal</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#scrollable-modal">Scrollable modal</button>
</div>
<div id="signup-modal" class="modal fade" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="text-center mt-2 mb-4">
<a href="document.html" class="text-success">
<span><img class="me-2" src="../admin-pro/src/assets/images/logo-icon.png"
alt="" height="18"><img
src="../admin-pro/src/assets/images/logo-text.png" alt=""
height="18"></span>
</a>
</div>
<form class="ps-3 pe-3 text-start" 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="#">Terms and Conditions</a></label>
</div>
</div>
<div class="mb-3 text-center">
<button class="btn btn-primary" type="submit">Sign Up
Free</button>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- SignIn modal content -->
<div id="login-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="text-center mt-2 mb-4">
<a href="document.html" class="text-success">
<span><img class="me-2" src="../admin-pro/src/assets/images/logo-icon.png"
alt="" height="18"><img
src="../admin-pro/src/assets/images/logo-text.png" alt=""
height="18"></span>
</a>
</div>
<form action="#" class="ps-3 pe-3 text-start">
<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 btn-primary" type="submit">Sign
In</button>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="button-group">
<!-- Custom width modal -->
<button type="button" class="btn btn-success" data-bs-toggle="modal"
data-bs-target="#signup-modal">Sign Up Modal</button>
<!-- Full width modal -->
<button type="button" class="btn btn-info" data-bs-toggle="modal"
data-bs-target="#login-modal">Log in Modal</button>
</div>
</div>
<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-light-success text-success">
<div class="modal-body p-4">
<div class="text-center text-success">
<i data-feather="check-circle" class="fill-white feather-lg"></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 btn-light-info text-info font-medium btn-lg px-4 fs-4 font-medium" 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-light-info">
<div class="modal-body p-4">
<div class="text-center text-info">
<i data-feather="info" class="fill-white feather-lg"></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 btn-light-warning text-warning font-medium btn-lg px-4 fs-4 font-medium" 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-light-warning">
<div class="modal-body p-4">
<div class="text-center text-warning">
<i data-feather="alert-octagon" class="fill-white feather-lg"></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 btn-light-danger text-danger font-medium btn-lg px-4 fs-4 font-medium" 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-light-danger">
<div class="modal-body p-4">
<div class="text-center text-danger">
<i data-feather="x-octagon" class="fill-white feather-lg"></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 id="primary-header-modal" class="modal fade" tabindex="-1"
aria-labelledby="primary-header-modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-primary text-white">
<h4 class="modal-title" id="primary-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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-danger"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-light-primary text-primary font-medium">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- info header modal -->
<button type="button" class="btn btn-light-info text-info btn-lg px-4 fs-4 font-medium" 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">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-info text-white">
<h4 class="modal-title" id="info-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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-danger"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-light-info text-info font-medium">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- danger header modal -->
<button type="button" class="btn btn-light-danger text-danger btn-lg px-4 fs-4 font-medium" 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">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-danger text-white">
<h4 class="modal-title" id="danger-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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-danger"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-light-danger text-danger font-medium">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- warning header modal -->
<button type="button" class="btn btn-light-warning text-warning btn-lg px-4 fs-4 font-medium" 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">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-warning text-white">
<h4 class="modal-title" id="warning-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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-danger"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-light-warning text-warning font-medium">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- success header modal -->
<button type="button" class="btn btn-light-success text-success btn-lg px-4 fs-4 font-medium" 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">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-success text-white">
<h4 class="modal-title" id="success-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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-danger"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-light-success text-success font-medium">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- dark header modal -->
<button type="button" class="btn btn-dark btn-lg px-4 fs-4 font-medium" 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">
<div class="modal-content">
<div class="modal-header modal-colored-header bg-dark text-white">
<h4 class="modal-title" id="dark-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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-danger"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-dark">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="button-group">
<!-- Primary header modal -->
<button type="button" class="btn btn-light-primary text-primary btn-lg px-4 fs-4 font-medium" 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">
<div class="modal-content modal-filled bg-primary">
<div class="modal-header modal-colored-header text-white">
<h4 class="modal-title" id="primary-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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 btn-light-info text-info btn-lg px-4 fs-4 font-medium" 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">
<div class="modal-content modal-filled bg-info">
<div class="modal-header modal-colored-header text-white">
<h4 class="modal-title" id="info-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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 btn-light-danger text-danger btn-lg px-4 fs-4 font-medium" 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">
<div class="modal-content modal-filled bg-danger">
<div class="modal-header modal-colored-header text-white">
<h4 class="modal-title" id="danger-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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 btn-light-warning text-warning btn-lg px-4 fs-4 font-medium" 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">
<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" 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 btn-light-success text-success btn-lg px-4 fs-4 font-medium" 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">
<div class="modal-content modal-filled bg-success">
<div class="modal-header modal-colored-header text-white">
<h4 class="modal-title" id="success-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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 btn-dark btn-lg px-4 fs-4 font-medium" 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">
<div class="modal-contentmodal-filled bg-dark">
<div class="modal-header modal-colored-header text-white">
<h4 class="modal-title" id="dark-header-modalLabel">Modal Heading
</h4>
<button type="button" class="btn-close" 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 id="multiple-one" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="multiple-oneModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="multiple-oneModalLabel">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0">Text in a modal</h5>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
data-bs-target="#multiple-two" data-bs-toggle="modal"
data-bs-dismiss="modal">Next</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<div id="multiple-two" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="multiple-twoModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="multiple-twoModalLabel">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="mt-0">Text in a modal</h5>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
data-bs-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="button-group">
<!-- Top modal -->
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#multiple-one">Multiple Modal</button>
</div>