| Server IP : 138.197.107.151 / Your IP : 216.73.217.7 Web Server : Apache/2.4.58 (Ubuntu) System : Linux BloxBy-Builder 6.8.0-71-generic #71-Ubuntu SMP PREEMPT_DYNAMIC Tue Jul 22 16:52:38 UTC 2025 x86_64 User : wpbetasites_mrakzqskir ( 1022) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/silversharkdev/public/skote_html-main/ajax/ |
Upload File : |
<div class="page-content">
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center
justify-content-between">
<h4 class="mb-sm-0 font-size-18">Modals</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript:
void(0);">UI Elements</a></li>
<li class="breadcrumb-item active">Modals</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Modals Examples</h4>
<p class="card-title-desc">Modals are streamlined, but flexible
dialog prompts powered by JavaScript. They support a number of use cases
from user notification to completely custom content and feature a
handful of helpful subcomponents, sizes, and more.</p>
<div class="modal bs-example-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
</div>
</div><!-- end row -->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Default Modal</h4>
<p class="card-title-desc">Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p>
<div>
<button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#myModal">Standard modal</button>
<!-- sample modal content -->
<div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Default Modal Heading</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5>Overflowing text to show scroll behavior</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>
<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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div> <!-- end preview-->
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Fullscreen Modal</h4>
<p class="card-title-desc">Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a <code>.modal-fullscreen</code>.</p>
<div>
<button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Fullscreen modal</button>
<!-- sample modal content -->
<div id="exampleModalFullscreen" class="modal fade" tabindex="-1" aria-labelledby="#exampleModalFullscreenLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalFullscreenLabel">Fullscreen Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5>Overflowing text to show scroll behavior</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>
<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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div> <!-- end preview-->
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Optional Sizes</h4>
<p class="card-title-desc">Modals have three optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
<div class="d-flex flex-wrap gap-2">
<!-- Extra Large modal button -->
<button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target=".bs-example-modal-xl">Extra large modal</button>
<!-- Large modal button -->
<button type="button" class="btn btn-light waves-effect" data-bs-toggle="modal" data-bs-target=".bs-example-modal-lg">Large modal</button>
<!-- Small modal button -->
<button type="button" class="btn btn-success waves-effect waves-light" data-bs-toggle="modal" data-bs-target=".bs-example-modal-sm">Small modal</button>
</div>
<div>
<!-- Extra Large modal example -->
<div class="modal fade bs-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myExtraLargeModalLabel">Extra large 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 class="mb-0">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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Large modal example -->
<div class="modal fade 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">
<h5 class="modal-title" id="myLargeModalLabel">Large 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 class="mb-0">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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Small modal example -->
<div class="modal fade 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">
<h5 class="modal-title" id="mySmallModalLabel">Small 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 class="mb-0">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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Vertically Centered</h5>
<p class="card-title-desc">Add <code>.modal-dialog-centered</code> to <code>.modal-dialog</code> to vertically center the modal.</p>
<div>
<!-- center modal -->
<button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target=".bs-example-modal-center">Center modal</button>
<div class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Center 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 class="mb-0">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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Scrollable Modal</h5>
<p class="card-title-desc">You can also create a scrollable modal that allows scroll the modal body by adding <code>.modal-dialog-scrollable</code> to <code>.modal-dialog</code>.</p>
<!-- Scrollable modal button -->
<button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">Scrollable modal</button>
<!-- Scrollable modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Scrollable 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 btn-light" 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>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Static Backdrop</h5>
<p class="card-title-desc">When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.</p>
<div>
<!-- Static Backdrop modal Button -->
<button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Static backdrop modal
</button>
<!-- Static Backdrop Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>I will not close if you click outside me. Don't even try to press escape key.</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-primary">Understood</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Toggle Between Modals</h4>
<p class="card-title-desc">Toggle between multiple modals with some clever placement of the <code>data-bs-target</code> and <code>data-bs-toggle</code> attributes.</p>
<div>
<button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#firstmodal">Open First Modal</button>
<!-- First modal dialog -->
<div class="modal fade" id="firstmodal" aria-hidden="true" aria-labelledby="..." tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Show a second modal and hide this one with the button below.</p>
</div>
<div class="modal-footer">
<!-- Toogle to second dialog -->
<button class="btn btn-primary" data-bs-target="#secondmodal" data-bs-toggle="modal" data-bs-dismiss="modal">Open Second Modal</button>
</div>
</div>
</div>
</div>
<!-- Second modal dialog -->
<div class="modal fade" id="secondmodal" aria-hidden="true" aria-labelledby="..." tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Hide this modal and show the first with the button below.</p>
</div>
<div class="modal-footer">
<!-- Toogle to first dialog, `data-bs-dismiss` attribute can be omitted - clicking on link will close dialog anyway -->
<button class="btn btn-primary" data-bs-target="#firstmodal" data-bs-toggle="modal" data-bs-dismiss="modal">Back to First</button>
</div>
</div>
</div>
</div>
</div> <!-- end preview-->
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Varying Modal Content</h4>
<p class="card-title-desc">Modal of buttons that all trigger the same modal with slightly different contents. Use <code>event.relatedTarget</code> and HTML <code>data-bs-target</code> attributes to vary the contents of the modal depending on which button was clicked.</p>
<div>
<div class="d-flex flex-wrap gap-3">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<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="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</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">Send message</button>
</div>
</div>
</div>
</div>
</div> <!-- end preview-->
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div> <!-- container-fluid -->
</div>
<!-- End Page-content -->