406 lines
19 KiB
HTML
406 lines
19 KiB
HTML
{% extends "layouts/base.html" %}
|
||
|
||
{% block title %} UI Cards {% endblock %}
|
||
|
||
<!-- Specific Page CSS goes HERE -->
|
||
{% block stylesheets %}{% endblock stylesheets %}
|
||
|
||
{% block content %}
|
||
|
||
<main class="content">
|
||
<div class="container-fluid p-0">
|
||
|
||
<h1 class="h3 mb-3">Modals</h1>
|
||
|
||
<div class="row">
|
||
<div class="col-12 col-lg-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">Default modal</h5>
|
||
<h6 class="card-subtitle text-muted">Default Bootstrap modal.</h6>
|
||
</div>
|
||
<div class="card-body text-center">
|
||
<p>Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
|
||
<!-- BEGIN primary modal -->
|
||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#defaultModalPrimary">
|
||
Primary
|
||
</button>
|
||
<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Default modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-primary">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END primary modal -->
|
||
<!-- BEGIN success modal -->
|
||
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#defaultModalSuccess">
|
||
Success
|
||
</button>
|
||
<div class="modal fade" id="defaultModalSuccess" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Default modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-success">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END success modal -->
|
||
<!-- BEGIN danger modal -->
|
||
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#defaultModalDanger">
|
||
Danger
|
||
</button>
|
||
<div class="modal fade" id="defaultModalDanger" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Default modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-danger">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END danger modal -->
|
||
<!-- BEGIN warning modal -->
|
||
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#defaultModalWarning">
|
||
Warning
|
||
</button>
|
||
<div class="modal fade" id="defaultModalWarning" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Default modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-warning">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END warning modal -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-lg-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">Colored modal</h5>
|
||
<h6 class="card-subtitle text-muted">Colored Bootstrap modal.</h6>
|
||
</div>
|
||
<div class="card-body text-center">
|
||
<p>Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
|
||
<!-- BEGIN primary modal -->
|
||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#coloredModalPrimary">
|
||
Primary
|
||
</button>
|
||
<div class="modal modal-colored modal-primary fade" id="coloredModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Colored modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-light">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END primary modal -->
|
||
<!-- BEGIN success modal -->
|
||
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#coloredModalSuccess">
|
||
Success
|
||
</button>
|
||
<div class="modal modal-colored modal-success fade" id="coloredModalSuccess" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Colored modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-light">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END success modal -->
|
||
<!-- BEGIN danger modal -->
|
||
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#coloredModalDanger">
|
||
Danger
|
||
</button>
|
||
<div class="modal modal-colored modal-danger fade" id="coloredModalDanger" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Colored modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-light">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END danger modal -->
|
||
<!-- BEGIN warning modal -->
|
||
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#coloredModalWarning">
|
||
Warning
|
||
</button>
|
||
<div class="modal modal-colored modal-warning fade" id="coloredModalWarning" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Colored modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-light">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END warning modal -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-lg-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">Centered modal</h5>
|
||
<h6 class="card-subtitle text-muted">Vertically centered modal.</h6>
|
||
</div>
|
||
<div class="card-body text-center">
|
||
<p>Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
|
||
<!-- BEGIN primary modal -->
|
||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#centeredModalPrimary">
|
||
Primary
|
||
</button>
|
||
<div class="modal fade" id="centeredModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Centered modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-primary">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END primary modal -->
|
||
<!-- BEGIN success modal -->
|
||
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#centeredModalSuccess">
|
||
Success
|
||
</button>
|
||
<div class="modal fade" id="centeredModalSuccess" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Centered modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-success">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END success modal -->
|
||
<!-- BEGIN danger modal -->
|
||
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#centeredModalDanger">
|
||
Danger
|
||
</button>
|
||
<div class="modal fade" id="centeredModalDanger" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Centered modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-danger">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END danger modal -->
|
||
<!-- BEGIN warning modal -->
|
||
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#centeredModalWarning">
|
||
Warning
|
||
</button>
|
||
<div class="modal fade" id="centeredModalWarning" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Centered modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-warning">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END warning modal -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-lg-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title">Modal sizes</h5>
|
||
<h6 class="card-subtitle text-muted">These sizes kick in at certain breakpoints to avoid scrollbars on smaller viewports.</h6>
|
||
</div>
|
||
<div class="card-body text-center">
|
||
<p>Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
|
||
<!-- BEGIN modal -->
|
||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sizedModalSm">
|
||
Small
|
||
</button>
|
||
<div class="modal fade" id="sizedModalSm" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-sm" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Small modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-primary">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END modal -->
|
||
<!-- BEGIN modal -->
|
||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sizedModalMd">
|
||
Medium
|
||
</button>
|
||
<div class="modal fade" id="sizedModalMd" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-md" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Medium modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-primary">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END modal -->
|
||
<!-- BEGIN modal -->
|
||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sizedModalLg">
|
||
Large
|
||
</button>
|
||
<div class="modal fade" id="sizedModalLg" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Large modal</h5>
|
||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body m-3">
|
||
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-primary">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END modal -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
{% endblock content %}
|
||
|
||
<!-- Specific Page JS goes HERE -->
|
||
{% block javascripts %}{% endblock javascripts %}
|