{% 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 %}
