File: /var/www/selfanalyse/school/html/ui-modals.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
<title>Adminmart Template - The Ultimate Multipurpose admin template</title>
<!-- Custom CSS -->
<link href="../dist/css/style.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper" data-theme="light" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full" data-sidebar-position="fixed" data-header-position="fixed" data-boxed-layout="full">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<header class="topbar" data-navbarbg="skin6">
<nav class="navbar top-navbar navbar-expand-md">
<div class="navbar-header" data-logobg="skin6">
<!-- This is for the sidebar toggle which is visible on mobile only -->
<a class="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)"><i
class="ti-menu ti-close"></i></a>
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-brand">
<!-- Logo icon -->
<a href="index.html">
<b class="logo-icon">
<!-- Dark Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<!-- Light Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="light-logo" />
</b>
<!--End Logo icon -->
<!-- Logo text -->
<span class="logo-text">
<!-- dark Logo text -->
<img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
<!-- Light Logo text -->
<img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
</span>
</a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Toggle which is visible on mobile only -->
<!-- ============================================================== -->
<a class="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i
class="ti-more"></i></a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-left mr-auto ml-3 pl-1">
<!-- Notification -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle pl-md-3 position-relative" href="javascript:void(0)"
id="bell" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span><i data-feather="bell" class="svg-icon"></i></span>
<span class="badge badge-primary notify-no rounded-circle">5</span>
</a>
<div class="dropdown-menu dropdown-menu-left mailbox animated bounceInDown">
<ul class="list-style-none">
<li>
<div class="message-center notifications position-relative">
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<div class="btn btn-danger rounded-circle btn-circle"><i
data-feather="airplay" class="text-white"></i></div>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Luanch Admin</h6>
<span class="font-12 text-nowrap d-block text-muted">Just see
the my new
admin!</span>
<span class="font-12 text-nowrap d-block text-muted">9:30 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-success text-white rounded-circle btn-circle"><i
data-feather="calendar" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Event today</h6>
<span
class="font-12 text-nowrap d-block text-muted text-truncate">Just
a reminder that you have event</span>
<span class="font-12 text-nowrap d-block text-muted">9:10 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-info rounded-circle btn-circle"><i
data-feather="settings" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Settings</h6>
<span
class="font-12 text-nowrap d-block text-muted text-truncate">You
can customize this template
as you want</span>
<span class="font-12 text-nowrap d-block text-muted">9:08 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-primary rounded-circle btn-circle"><i
data-feather="box" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Pavan kumar</h6> <span
class="font-12 text-nowrap d-block text-muted">Just
see the my admin!</span>
<span class="font-12 text-nowrap d-block text-muted">9:02 AM</span>
</div>
</a>
</div>
</li>
<li>
<a class="nav-link pt-3 text-center text-dark" href="javascript:void(0);">
<strong>Check all notifications</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
</div>
</li>
<!-- End Notification -->
<!-- ============================================================== -->
<!-- create new -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="settings" class="svg-icon"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="javascript:void(0)">
<div class="customize-input">
<select
class="custom-select form-control bg-white custom-radius custom-shadow border-0">
<option selected>EN</option>
<option value="1">AB</option>
<option value="2">AK</option>
<option value="3">BE</option>
</select>
</div>
</a>
</li>
</ul>
<!-- ============================================================== -->
<!-- Right side toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-right">
<!-- ============================================================== -->
<!-- Search -->
<!-- ============================================================== -->
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="javascript:void(0)">
<form>
<div class="customize-input">
<input class="form-control custom-shadow custom-radius border-0 bg-white"
type="search" placeholder="Search" aria-label="Search">
<i class="form-control-icon" data-feather="search"></i>
</div>
</form>
</a>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img src="../assets/images/users/profile-pic.jpg" alt="user" class="rounded-circle"
width="40">
<span class="ml-2 d-none d-lg-inline-block"><span>Hello,</span> <span
class="text-dark">Jason Doe</span> <i data-feather="chevron-down"
class="svg-icon"></i></span>
</a>
<div class="dropdown-menu dropdown-menu-right user-dd animated flipInY">
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="user"
class="svg-icon mr-2 ml-1"></i>
My Profile</a>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="credit-card"
class="svg-icon mr-2 ml-1"></i>
My Balance</a>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="mail"
class="svg-icon mr-2 ml-1"></i>
Inbox</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="settings"
class="svg-icon mr-2 ml-1"></i>
Account Setting</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="power"
class="svg-icon mr-2 ml-1"></i>
Logout</a>
<div class="dropdown-divider"></div>
<div class="pl-4 p-3"><a href="javascript:void(0)" class="btn btn-sm btn-info">View
Profile</a></div>
</div>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
</ul>
</div>
</nav>
</header>
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar" data-sidebarbg="skin6">
<!-- Sidebar scroll-->
<div class="scroll-sidebar" data-sidebarbg="skin6">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="index.html"
aria-expanded="false"><i data-feather="home" class="feather-icon"></i><span
class="hide-menu">Dashboard</span></a></li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Applications</span></li>
<li class="sidebar-item"> <a class="sidebar-link" href="ticket-list.html"
aria-expanded="false"><i data-feather="tag" class="feather-icon"></i><span
class="hide-menu">Ticket List
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-chat.html"
aria-expanded="false"><i data-feather="message-square" class="feather-icon"></i><span
class="hide-menu">Chat</span></a></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-calendar.html"
aria-expanded="false"><i data-feather="calendar" class="feather-icon"></i><span
class="hide-menu">Calendar</span></a></li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Components</span></li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="file-text" class="feather-icon"></i><span
class="hide-menu">Forms </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="form-inputs.html" class="sidebar-link"><span
class="hide-menu"> Form Inputs
</span></a>
</li>
<li class="sidebar-item"><a href="form-input-grid.html" class="sidebar-link"><span
class="hide-menu"> Form Grids
</span></a>
</li>
<li class="sidebar-item"><a href="form-checkbox-radio.html" class="sidebar-link"><span
class="hide-menu"> Checkboxes &
Radios
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="grid" class="feather-icon"></i><span
class="hide-menu">Tables </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="table-basic.html" class="sidebar-link"><span
class="hide-menu"> Basic Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-dark-basic.html" class="sidebar-link"><span
class="hide-menu"> Dark Basic Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-sizing.html" class="sidebar-link"><span
class="hide-menu">
Sizing Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-layout-coloured.html" class="sidebar-link"><span
class="hide-menu">
Coloured
Table Layout
</span></a>
</li>
<li class="sidebar-item"><a href="table-datatable-basic.html" class="sidebar-link"><span
class="hide-menu">
Basic
Datatables
Layout
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="bar-chart" class="feather-icon"></i><span
class="hide-menu">Charts </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="chart-morris.html" class="sidebar-link"><span
class="hide-menu"> Morris Chart
</span></a>
</li>
<li class="sidebar-item"><a href="chart-chart-js.html" class="sidebar-link"><span
class="hide-menu"> ChartJs
</span></a>
</li>
<li class="sidebar-item"><a href="chart-knob.html" class="sidebar-link"><span
class="hide-menu">
Knob Chart
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="box" class="feather-icon"></i><span
class="hide-menu">UI Elements </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="ui-buttons.html" class="sidebar-link"><span
class="hide-menu"> Buttons
</span></a>
</li>
<li class="sidebar-item"><a href="ui-modals.html" class="sidebar-link"><span
class="hide-menu"> Modals </span></a>
</li>
<li class="sidebar-item"><a href="ui-tab.html" class="sidebar-link"><span
class="hide-menu"> Tabs </span></a></li>
<li class="sidebar-item"><a href="ui-tooltip-popover.html" class="sidebar-link"><span
class="hide-menu"> Tooltip &
Popover</span></a></li>
<li class="sidebar-item"><a href="ui-notification.html" class="sidebar-link"><span
class="hide-menu">Notification</span></a></li>
<li class="sidebar-item"><a href="ui-progressbar.html" class="sidebar-link"><span
class="hide-menu">Progressbar</span></a></li>
<li class="sidebar-item"><a href="ui-typography.html" class="sidebar-link"><span
class="hide-menu">Typography</span></a></li>
<li class="sidebar-item"><a href="ui-bootstrap.html" class="sidebar-link"><span
class="hide-menu">Bootstrap
UI</span></a></li>
<li class="sidebar-item"><a href="ui-breadcrumb.html" class="sidebar-link"><span
class="hide-menu">Breadcrumb</span></a></li>
<li class="sidebar-item"><a href="ui-list-media.html" class="sidebar-link"><span
class="hide-menu">List
Media</span></a></li>
<li class="sidebar-item"><a href="ui-grid.html" class="sidebar-link"><span
class="hide-menu"> Grid </span></a></li>
<li class="sidebar-item"><a href="ui-carousel.html" class="sidebar-link"><span
class="hide-menu">
Carousel</span></a></li>
<li class="sidebar-item"><a href="ui-scrollspy.html" class="sidebar-link"><span
class="hide-menu">
Scrollspy</span></a></li>
<li class="sidebar-item"><a href="ui-toasts.html" class="sidebar-link"><span
class="hide-menu"> Toasts</span></a>
</li>
<li class="sidebar-item"><a href="ui-spinner.html" class="sidebar-link"><span
class="hide-menu"> Spinner </span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="ui-cards.html"
aria-expanded="false"><i data-feather="sidebar" class="feather-icon"></i><span
class="hide-menu">Cards
</span></a>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Authentication</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="authentication-login1.html"
aria-expanded="false"><i data-feather="lock" class="feather-icon"></i><span
class="hide-menu">Login
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link"
href="authentication-register1.html" aria-expanded="false"><i data-feather="lock"
class="feather-icon"></i><span class="hide-menu">Register
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="feather" class="feather-icon"></i><span
class="hide-menu">Icons
</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="icon-fontawesome.html" class="sidebar-link"><span
class="hide-menu"> Fontawesome Icons </span></a></li>
<li class="sidebar-item"><a href="icon-simple-lineicon.html" class="sidebar-link"><span
class="hide-menu"> Simple Line Icons </span></a></li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="crosshair" class="feather-icon"></i><span
class="hide-menu">Multi
level
dd</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item 1.1</span></a>
</li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item 1.2</span></a>
</li>
<li class="sidebar-item"> <a class="has-arrow sidebar-link" href="javascript:void(0)"
aria-expanded="false"><span class="hide-menu">Menu 1.3</span></a>
<ul aria-expanded="false" class="collapse second-level base-level-line">
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.1</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.2</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.3</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.4</span></a></li>
</ul>
</li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.4</span></a></li>
</ul>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Extra</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="../../docs/docs.html"
aria-expanded="false"><i data-feather="edit-3" class="feather-icon"></i><span
class="hide-menu">Documentation</span></a></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="authentication-login1.html"
aria-expanded="false"><i data-feather="log-out" class="feather-icon"></i><span
class="hide-menu">Logout</span></a></li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="page-breadcrumb">
<div class="row">
<div class="col-7 align-self-center">
<h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Modals</h4>
<div class="d-flex align-items-center">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0 p-0">
<li class="breadcrumb-item"><a href="index.html" class="text-muted">Home</a></li>
<li class="breadcrumb-item text-muted active" aria-current="page">Library</li>
</ol>
</nav>
</div>
</div>
<div class="col-5 align-self-center">
<div class="customize-input float-right">
<select class="custom-select custom-select-set form-control bg-white border-0 custom-shadow custom-radius">
<option selected>Aug 19</option>
<option value="1">July 19</option>
<option value="2">Jun 19</option>
</select>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Bootstrap Modals</h4>
<p class="text-muted">
A rendered modal with header, body, and set of actions in the footer.
</p>
<!-- sample modal content -->
<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="close" data-dismiss="modal"
aria-hidden="true">×</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-light"
data-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="close" data-dismiss="modal"
aria-hidden="true">×</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="close" data-dismiss="modal"
aria-hidden="true">×</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-full-width">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="fullWidthModalLabel">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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-light"
data-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="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</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-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="btn-list">
<!-- Standard modal -->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#myModal">Standard Modal</button>
<!-- Large modal -->
<button type="button" class="btn btn-info" data-toggle="modal"
data-target="#bs-example-modal-lg">Large modal</button>
<!-- Small modal -->
<button type="button" class="btn btn-success" data-toggle="modal"
data-target="#bs-example-modal-sm">Small modal</button>
<!-- Full width modal -->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#full-width-modal">Full width modal</button>
<button type="button" class="btn btn-secondary" data-toggle="modal"
data-target="#scrollable-modal">Scrollable modal</button>
</div>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Modal with Pages</h4>
<p class="text-muted">
Examples of custom modals.
</p>
<!-- Signup modal content -->
<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="index.html" class="text-success">
<span><img class="mr-2" src="../assets/images/logo-icon.png"
alt="" height="18"><img
src="../assets/images/logo-text.png" alt=""
height="18"></span>
</a>
</div>
<form class="pl-3 pr-3" action="#">
<div class="form-group">
<label for="username">Name</label>
<input class="form-control" type="email" id="username"
required="" placeholder="Michael Zenaty">
</div>
<div class="form-group">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress"
required="" placeholder="john@deo.com">
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" required=""
id="password" placeholder="Enter your password">
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"
id="customCheck1">
<label class="custom-control-label" for="customCheck1">I
accept <a href="#">Terms and Conditions</a></label>
</div>
</div>
<div class="form-group 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="index.html" class="text-success">
<span><img class="mr-2" src="../assets/images/logo-icon.png"
alt="" height="18"><img
src="../assets/images/logo-text.png" alt=""
height="18"></span>
</a>
</div>
<form action="#" class="pl-3 pr-3">
<div class="form-group">
<label for="emailaddress1">Email address</label>
<input class="form-control" type="email" id="emailaddress1"
required="" placeholder="john@deo.com">
</div>
<div class="form-group">
<label for="password1">Password</label>
<input class="form-control" type="password" required=""
id="password1" placeholder="Enter your password">
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"
id="customCheck2">
<label class="custom-control-label"
for="customCheck2">Remember me</label>
</div>
</div>
<div class="form-group 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="btn-list">
<!-- Custom width modal -->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#signup-modal">Sign Up Modal</button>
<!-- Full width modal -->
<button type="button" class="btn btn-info" data-toggle="modal"
data-target="#login-modal">Log in Modal</button>
</div>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
</div> <!-- end row-->
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Modal based Alerts</h4>
<p class="text-muted">
Show different contexual alert messages using modal component
</p>
<!-- Success Alert Modal -->
<div id="success-alert-modal" class="modal fade" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-filled bg-success">
<div class="modal-body p-4">
<div class="text-center">
<i class="dripicons-checkmark h1"></i>
<h4 class="mt-2">Well Done!</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-dismiss="modal">Continue</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Info Alert Modal -->
<div id="info-alert-modal" class="modal fade" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body p-4">
<div class="text-center">
<i class="dripicons-information h1 text-info"></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-info my-2"
data-dismiss="modal">Continue</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Warning Alert Modal -->
<div id="warning-alert-modal" class="modal fade" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body p-4">
<div class="text-center">
<i class="dripicons-warning h1 text-warning"></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-warning my-2"
data-dismiss="modal">Continue</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Danger Alert Modal -->
<div id="danger-alert-modal" class="modal fade" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-filled bg-danger">
<div class="modal-body p-4">
<div class="text-center">
<i class="dripicons-wrong h1"></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-dismiss="modal">Continue</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="btn-list">
<!-- Success Alert modal -->
<button type="button" class="btn btn-success" data-toggle="modal"
data-target="#success-alert-modal">Success Alert</button>
<!-- Info Alert modal -->
<button type="button" class="btn btn-info" data-toggle="modal"
data-target="#info-alert-modal">Info Alert</button>
<!-- Warning Alert modal -->
<button type="button" class="btn btn-warning" data-toggle="modal"
data-target="#warning-alert-modal">Warning Alert</button>
<!-- Danger Alert modal -->
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#danger-alert-modal">Danger Alert</button>
</div>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Modal Position</h4>
<p class="text-muted">
Specify the position for the modal. You can display modal at top, bottom, center or
right of page by specifying
classes <code>modal-top</code>, <code>modal-bottom</code>,
<code>modal-dialog-centered</code> and <code>modal-right</code>
respectively.
</p>
<!-- Top modal content -->
<div id="top-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-top">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="topModalLabel">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
<div class="modal-body">
<h5>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-light"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Right modal content -->
<div id="right-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm modal-right">
<div class="modal-content">
<div class="modal-header border-0">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="text-center">
<h4 class="mt-0">Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
<button type="button" class="btn btn-danger btn-sm"
data-dismiss="modal">Close</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Bottom modal content -->
<div id="bottom-modal" class="modal fade" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-sm modal-bottom">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="bottomModalLabel">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
<div class="modal-body">
<h5>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-light"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Center modal content -->
<div class="modal fade" id="centermodal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myCenterModalLabel">Center modal</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="btn-list">
<!-- Top modal -->
<button type="button" class="btn btn-secondary" data-toggle="modal"
data-target="#top-modal">Top Modal</button>
<!-- Bottom modal -->
<button type="button" class="btn btn-secondary" data-toggle="modal"
data-target="#bottom-modal">Bottom Modal</button>
<!-- Center modal -->
<button type="button" class="btn btn-secondary" data-toggle="modal"
data-target="#centermodal">Center modal</button>
<!-- Right modal -->
<button type="button" class="btn btn-secondary" data-toggle="modal"
data-target="#right-modal">Rightbar Modal</button>
</div>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
</div> <!-- end row-->
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Colored Header Modals</h4>
<p class="text-muted">
A rendered modal with header having contexual background color.
</p>
<!-- Primary Header Modal -->
<div id="primary-header-modal" class="modal fade" tabindex="-1" role="dialog"
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">
<h4 class="modal-title" id="primary-header-modalLabel">Modal Heading
</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Success Header Modal -->
<div id="success-header-modal" class="modal fade" tabindex="-1" role="dialog"
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">
<h4 class="modal-title" id="success-header-modalLabel">Modal Heading
</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Info Header Modal -->
<div id="info-header-modal" class="modal fade" tabindex="-1" role="dialog"
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">
<h4 class="modal-title" id="info-header-modalLabel">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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-dismiss="modal">Close</button>
<button type="button" class="btn btn-info">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Warning Header Modal -->
<div id="warning-header-modal" class="modal fade" tabindex="-1" role="dialog"
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">
<h4 class="modal-title" id="warning-header-modalLabel">Modal Heading
</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Danger Header Modal -->
<div id="danger-header-modal" class="modal fade" tabindex="-1" role="dialog"
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">
<h4 class="modal-title" id="danger-header-modalLabel">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Dark Header Modal -->
<div id="dark-header-modal" class="modal fade" tabindex="-1" role="dialog"
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">
<h4 class="modal-title" id="dark-header-modalLabel">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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-dismiss="modal">Close</button>
<button type="button" class="btn btn-dark">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="btn-list">
<!-- Primary header modal -->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#primary-header-modal">Primary Header</button>
<!-- Success header modal -->
<button type="button" class="btn btn-success" data-toggle="modal"
data-target="#success-header-modal">Success Header</button>
<!-- Info header modal -->
<button type="button" class="btn btn-info" data-toggle="modal"
data-target="#info-header-modal">Info Header</button>
<!-- Warning header modal -->
<button type="button" class="btn btn-warning" data-toggle="modal"
data-target="#warning-header-modal">Warning Header</button>
<!-- Danger header modal -->
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#danger-header-modal">Danger Header</button>
<!-- Dark header modal -->
<button type="button" class="btn btn-dark" data-toggle="modal"
data-target="#dark-header-modal">Dark Header</button>
</div>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Filled Modals</h4>
<p class="text-muted">
A rendered modal with header, body and footer having contexual background color.
</p>
<!-- Primary Filled Modal -->
<div id="fill-primary-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="fill-primary-modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-filled bg-primary">
<div class="modal-header">
<h4 class="modal-title" id="fill-primary-modalLabel">Primary Filled
Modal</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-light">Save
changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Success Filled Modal -->
<div id="fill-success-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="fill-success-modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-filled bg-success">
<div class="modal-header">
<h4 class="modal-title" id="fill-success-modalLabel">Success Filled
Modal</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-light">Save
changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Info Filled Modal -->
<div id="fill-info-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="fill-info-modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-filled bg-info">
<div class="modal-header">
<h4 class="modal-title" id="fill-info-modalLabel">Info Filled Modal</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-light">Save
changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Warning Filled Modal -->
<div id="fill-warning-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="fill-warning-modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-filled bg-warning">
<div class="modal-header">
<h4 class="modal-title" id="fill-warning-modalLabel">Warning Filled
Modal</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-light">Save
changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Danger Filled Modal -->
<div id="fill-danger-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="fill-danger-modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-filled bg-danger">
<div class="modal-header">
<h4 class="modal-title" id="fill-danger-modalLabel">Danger Filled Modal
</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-light">Save
changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Dark Filled Modal -->
<div id="fill-dark-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="fill-dark-modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-filled bg-dark">
<div class="modal-header">
<h4 class="modal-title" id="fill-dark-modalLabel">Dark Filled Modal</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-light">Save
changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="btn-list">
<!-- Primary header modal -->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#fill-primary-modal">Primary Filled</button>
<!-- Success header modal -->
<button type="button" class="btn btn-success" data-toggle="modal"
data-target="#fill-success-modal">Success Filled</button>
<!-- Info header modal -->
<button type="button" class="btn btn-info" data-toggle="modal"
data-target="#fill-info-modal">Info Filled</button>
<!-- Warning header modal -->
<button type="button" class="btn btn-warning" data-toggle="modal"
data-target="#fill-warning-modal">Warning Filled</button>
<!-- Danger header modal -->
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#fill-danger-modal">Danger Filled</button>
<!-- Dark header modal -->
<button type="button" class="btn btn-dark" data-toggle="modal"
data-target="#fill-dark-modal">Dark Filled</button>
</div>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
</div> <!-- end row-->
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Multiple Modal</h4>
<p class="text-muted">
Display a series of modals one by one to guide your users on multiple aspects or
take step wise input.
</p>
<!-- Modal -->
<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="close" data-dismiss="modal"
aria-hidden="true">×</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-target="#multiple-two" data-toggle="modal"
data-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="close" data-dismiss="modal"
aria-hidden="true">×</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-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="btn-list">
<!-- Top modal -->
<button type="button" class="btn btn-secondary" data-toggle="modal"
data-target="#multiple-one">Multiple Modal</button>
</div>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
</div> <!-- end row-->
<!-- ============================================================== -->
<!-- End Page Content -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer text-center text-muted">
All Rights Reserved by Adminmart. Designed and Developed by <a
href="https://wrappixel.com">WrapPixel</a>.
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="../assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- apps -->
<!-- apps -->
<script src="../dist/js/app-style-switcher.js"></script>
<script src="../dist/js/feather.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="../assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<!-- themejs -->
<!--Menu sidebar -->
<script src="../dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="../dist/js/custom.min.js"></script>
</body>
</html>