Ismi_Fatimatuzzahro_Putri
/
MIF_E31210174
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MIF_E31210174/public/admin/docs/docs-ui-modals.html

2275 lines
153 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="../src/assets/images/favicon.png">
<title>Adminmart Template - The Ultimate Multipurpose admin template</title>
<!-- This page css -->
<!-- Custom CSS -->
<link href="../src/dist/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="highlights/highlight.min.css">
<!-- Custom CSS -->
<!-- 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]-->
<!-- Custom CSS -->
</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="docs.html">
<b class="logo-icon">
<!-- Dark Logo icon -->
<img src="../src/assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<!-- Light Logo icon -->
<img src="../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="../src/assets/images/logo-text.png" alt="homepage" class="dark-logo" />
<!-- Light Logo text -->
<img src="../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">
<!-- ============================================================== -->
<!-- create new -->
<!-- ============================================================== -->
<li class="nav-item">
<a class="nav-link" href="docs.html" role="button">
Documentation
</a>
</li>
</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="nav-small-cap"><span class="hide-menu">Getting Started</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="docs.html"
aria-expanded="false"><i data-feather="bar-chart-2" class="feather-icon"></i>
<span class="hide-menu">Introduction</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="docs-start.html"
aria-expanded="false"><i data-feather="clipboard" class="feather-icon"></i>
<span class="hide-menu">Gettings Started</span></a>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">UI Components</span></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">Bootstrap
</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="docs-ui-buttons.html" class="sidebar-link"><span class="hide-menu"> Buttons </span></a></li>
<li class="sidebar-item"><a href="docs-ui-modals.html" class="sidebar-link"><span class="hide-menu"> Modals </span></a></li>
<li class="sidebar-item"><a href="docs-ui-tabs.html" class="sidebar-link"><span class="hide-menu"> Tabs </span></a></li>
<li class="sidebar-item"><a href="docs-ui-tooltip-popover.html" class="sidebar-link"><span class="hide-menu"> Tooltip & Popover </span></a></li>
<li class="sidebar-item"><a href="docs-ui-notification.html" class="sidebar-link"><span class="hide-menu"> Notification </span></a></li>
<li class="sidebar-item"><a href="docs-ui-progressbar.html" class="sidebar-link"><span class="hide-menu"> Progressbar </span></a></li>
<li class="sidebar-item"><a href="docs-ui-typography.html" class="sidebar-link"><span class="hide-menu"> Typography </span></a></li>
<li class="sidebar-item"><a href="docs-ui-bootstrapui.html" class="sidebar-link"><span class="hide-menu"> Bootstrap UI </span></a></li>
<li class="sidebar-item"><a href="docs-ui-breadcrumb.html" class="sidebar-link"><span class="hide-menu"> Breadcrumb </span></a></li>
<li class="sidebar-item"><a href="docs-ui-listmedia.html" class="sidebar-link"><span class="hide-menu"> List Media </span></a></li>
<li class="sidebar-item"><a href="docs-ui-grid.html" class="sidebar-link"><span class="hide-menu"> Grid </span></a></li>
<li class="sidebar-item"><a href="docs-ui-carousel.html" class="sidebar-link"><span class="hide-menu"> Carousel </span></a></li>
<li class="sidebar-item"><a href="docs-ui-scrollspy.html" class="sidebar-link"><span class="hide-menu"> Scrollspy </span></a></li>
<li class="sidebar-item"><a href="docs-ui-toasts.html" class="sidebar-link"><span class="hide-menu"> Toasts </span></a></li>
<li class="sidebar-item"><a href="docs-ui-spinner.html" class="sidebar-link"><span class="hide-menu"> Spinner </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="edit" class="feather-icon"></i><span
class="hide-menu">Customized
</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="docs-custom-datatables.html" class="sidebar-link"><span class="hide-menu"> Datatables </span></a></li>
<li class="sidebar-item"><a href="docs-custom-widgets.html" class="sidebar-link"><span class="hide-menu"> Widgets </span></a></li>
<li class="sidebar-item"><a href="docs-custom-chart-chartjs.html" class="sidebar-link"><span class="hide-menu"> ChartJs </span></a></li>
</ul>
</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="d-flex align-items-center">
<h4 class="page-title text-truncate text-dark font-weight-medium mb-0">Modals</h4>
<div class="ml-auto">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0 p-0">
<li class="breadcrumb-item text-muted active" aria-current="page">AdminMart</li>
<li class="breadcrumb-item text-muted" aria-current="page">Modals</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card overflow-hidden">
<div class="card-body border-bottom">
<h4 class="card-title mb-0">Bootstrap Modals</h4>
</div>
<div class="row justify-content-center bg-light p-5">
<div class="col-md-7">
<div class="card shadow-sm">
<div class="p-4 text-center">
<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">&times;</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-danger" 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-warning" 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>
</div>
</div>
</div>
<div class="px-4">
<h4 class="card-title mt-4">Code Here:</h4>
<hr>
<pre class="highlight html">
<code class="shadow-sm px-4" style="height: 300px;">
&lt;div id=&quot;myModal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt;Modal Heading&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h6&gt;Text in a modal&lt;/h6&gt;
&lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
&lt;hr&gt;
&lt;h6&gt;Overflowing text to show scroll behavior&lt;/h6&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Modal content for the above example --&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;bs-example-modal-lg&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;myLargeModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;myLargeModalLabel&quot;&gt;Large modal&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;bs-example-modal-sm&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;mySmallModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-sm&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;mySmallModalLabel&quot;&gt;Small modal&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Full width modal content --&gt;
&lt;div id=&quot;full-width-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;fullWidthModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-full-width&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;fullWidthModalLabel&quot;&gt;Modal Heading&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h6&gt;Text in a modal&lt;/h6&gt;
&lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
&lt;hr&gt;
&lt;h6&gt;Overflowing text to show scroll behavior&lt;/h6&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Long Content Scroll Modal --&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;scrollable-modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;scrollableModalTitle&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-dialog-scrollable&quot; role=&quot;document&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h5 class=&quot;modal-title&quot; id=&quot;scrollableModalTitle&quot;&gt;Modal title&lt;/h5&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-label=&quot;Close&quot;&gt;
&lt;span aria-hidden=&quot;true&quot;&gt;&times;&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;div class=&quot;btn-list&quot;&gt;
&lt;!-- Standard modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;Standard Modal&lt;/button&gt;
&lt;!-- Large modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#bs-example-modal-lg&quot;&gt;Large modal&lt;/button&gt;
&lt;!-- Small modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; data-toggle=&quot;modal&quot; data-target=&quot;#bs-example-modal-sm&quot;&gt;Small modal&lt;/button&gt;
&lt;!-- Full width modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#full-width-modal&quot;&gt;Full width modal&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#scrollable-modal&quot;&gt;Scrollable modal&lt;/button&gt;
&lt;/div&gt;
</code>
</pre>
</div>
<div class="px-4">
<h4 class="card-title">Modal with Pages</h4>
</div>
<div class="row justify-content-center bg-light p-5 mt-4">
<div class="col-md-7">
<div class="card shadow-sm">
<div class="p-4 text-center">
<!-- 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="../src/assets/images/logo-icon.png"
alt="" height="18"><img
src="../src/assets/images/logo-text.png" alt=""
height="18"></span>
</a>
</div>
<form class="pl-3 pr-3 text-left" 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="../src/assets/images/logo-icon.png"
alt="" height="18"><img
src="../src/assets/images/logo-text.png" alt=""
height="18"></span>
</a>
</div>
<form action="#" class="pl-3 pr-3 text-left">
<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-success" 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>
</div>
</div>
</div>
<div class="px-4">
<h4 class="card-title mt-4">Code Here</h4>
<hr>
<pre class="highlight html">
<code class="shadow-sm px-4" style="height: 300px;">
&lt;!-- Signup modal content --&gt;
&lt;div id=&quot;signup-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;div class=&quot;text-center mt-2 mb-4&quot;&gt;
&lt;a href=&quot;index.html&quot; class=&quot;text-success&quot;&gt;
&lt;span&gt;&lt;img class=&quot;mr-2&quot; src=&quot;../assets/images/logo-icon.png&quot;
alt=&quot;&quot; height=&quot;18&quot;&gt;&lt;img
src=&quot;../assets/images/logo-text.png&quot; alt=&quot;&quot;
height=&quot;18&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;form class=&quot;pl-3 pr-3&quot; action=&quot;#&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;username&quot;&gt;Name&lt;/label&gt;
&lt;input class=&quot;form-control&quot; type=&quot;email&quot; id=&quot;username&quot;
required=&quot;&quot; placeholder=&quot;Michael Zenaty&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;emailaddress&quot;&gt;Email address&lt;/label&gt;
&lt;input class=&quot;form-control&quot; type=&quot;email&quot; id=&quot;emailaddress&quot;
required=&quot;&quot; placeholder=&quot;john@deo.com&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
&lt;input class=&quot;form-control&quot; type=&quot;password&quot; required=&quot;&quot;
id=&quot;password&quot; placeholder=&quot;Enter your password&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;custom-control custom-checkbox&quot;&gt;
&lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot;
id=&quot;customCheck1&quot;&gt;
&lt;label class=&quot;custom-control-label&quot; for=&quot;customCheck1&quot;&gt;I
accept &lt;a href=&quot;#&quot;&gt;Terms and Conditions&lt;/a&gt;&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group text-center&quot;&gt;
&lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Sign Up
Free&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- SignIn modal content --&gt;
&lt;div id=&quot;login-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;div class=&quot;text-center mt-2 mb-4&quot;&gt;
&lt;a href=&quot;index.html&quot; class=&quot;text-success&quot;&gt;
&lt;span&gt;&lt;img class=&quot;mr-2&quot; src=&quot;../assets/images/logo-icon.png&quot;
alt=&quot;&quot; height=&quot;18&quot;&gt;&lt;img
src=&quot;../assets/images/logo-text.png&quot; alt=&quot;&quot;
height=&quot;18&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;form action=&quot;#&quot; class=&quot;pl-3 pr-3&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;emailaddress1&quot;&gt;Email address&lt;/label&gt;
&lt;input class=&quot;form-control&quot; type=&quot;email&quot; id=&quot;emailaddress1&quot;
required=&quot;&quot; placeholder=&quot;john@deo.com&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;password1&quot;&gt;Password&lt;/label&gt;
&lt;input class=&quot;form-control&quot; type=&quot;password&quot; required=&quot;&quot;
id=&quot;password1&quot; placeholder=&quot;Enter your password&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;custom-control custom-checkbox&quot;&gt;
&lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot;
id=&quot;customCheck2&quot;&gt;
&lt;label class=&quot;custom-control-label&quot;
for=&quot;customCheck2&quot;&gt;Remember me&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group text-center&quot;&gt;
&lt;button class=&quot;btn btn-rounded btn-primary&quot; type=&quot;submit&quot;&gt;Sign
In&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;div class=&quot;btn-list&quot;&gt;
&lt;!-- Custom width modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#signup-modal&quot;&gt;Sign Up Modal&lt;/button&gt;
&lt;!-- Full width modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#login-modal&quot;&gt;Log in Modal&lt;/button&gt;
&lt;/div&gt;
</code>
</pre>
</div>
<div class="px-4">
<h4 class="card-title">Modal based Alerts</h4>
</div>
<div class="row justify-content-center bg-light p-5 mt-4">
<div class="col-md-7">
<div class="card shadow-sm">
<div class="p-4 text-center">
<!-- 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 bg-info text-white">
<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-light 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 bg-warning text-white">
<div class="modal-body p-4">
<div class="text-center">
<i class="dripicons-warning h1"></i>
<h4 class="mt-2">Incorrect Information</h4>
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<button type="button" class="btn btn-light my-2"
data-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>
</div>
</div>
</div>
<div class="px-4">
<h4 class="card-title mt-4">Code Here</h4>
<hr>
<pre class="highlight html">
<code class="shadow-sm px-4" style="height: 300px;">
&lt;!-- Success Alert Modal --&gt;
&lt;div id=&quot;success-alert-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-sm&quot;&gt;
&lt;div class=&quot;modal-content modal-filled bg-success&quot;&gt;
&lt;div class=&quot;modal-body p-4&quot;&gt;
&lt;div class=&quot;text-center&quot;&gt;
&lt;i class=&quot;dripicons-checkmark h1&quot;&gt;&lt;/i&gt;
&lt;h4 class=&quot;mt-2&quot;&gt;Well Done!&lt;/h4&gt;
&lt;p class=&quot;mt-3&quot;&gt;Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.&lt;/p&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light my-2&quot;
data-dismiss=&quot;modal&quot;&gt;Continue&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Info Alert Modal --&gt;
&lt;div id=&quot;info-alert-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-sm&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-body p-4&quot;&gt;
&lt;div class=&quot;text-center&quot;&gt;
&lt;i class=&quot;dripicons-information h1 text-info&quot;&gt;&lt;/i&gt;
&lt;h4 class=&quot;mt-2&quot;&gt;Heads up!&lt;/h4&gt;
&lt;p class=&quot;mt-3&quot;&gt;Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.&lt;/p&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info my-2&quot;
data-dismiss=&quot;modal&quot;&gt;Continue&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Warning Alert Modal --&gt;
&lt;div id=&quot;warning-alert-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-sm&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-body p-4&quot;&gt;
&lt;div class=&quot;text-center&quot;&gt;
&lt;i class=&quot;dripicons-warning h1 text-warning&quot;&gt;&lt;/i&gt;
&lt;h4 class=&quot;mt-2&quot;&gt;Incorrect Information&lt;/h4&gt;
&lt;p class=&quot;mt-3&quot;&gt;Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.&lt;/p&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning my-2&quot;
data-dismiss=&quot;modal&quot;&gt;Continue&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Danger Alert Modal --&gt;
&lt;div id=&quot;danger-alert-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-sm&quot;&gt;
&lt;div class=&quot;modal-content modal-filled bg-danger&quot;&gt;
&lt;div class=&quot;modal-body p-4&quot;&gt;
&lt;div class=&quot;text-center&quot;&gt;
&lt;i class=&quot;dripicons-wrong h1&quot;&gt;&lt;/i&gt;
&lt;h4 class=&quot;mt-2&quot;&gt;Oh snap!&lt;/h4&gt;
&lt;p class=&quot;mt-3&quot;&gt;Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.&lt;/p&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light my-2&quot;
data-dismiss=&quot;modal&quot;&gt;Continue&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;div class=&quot;btn-list&quot;&gt;
&lt;!-- Success Alert modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#success-alert-modal&quot;&gt;Success Alert&lt;/button&gt;
&lt;!-- Info Alert modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#info-alert-modal&quot;&gt;Info Alert&lt;/button&gt;
&lt;!-- Warning Alert modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#warning-alert-modal&quot;&gt;Warning Alert&lt;/button&gt;
&lt;!-- Danger Alert modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#danger-alert-modal&quot;&gt;Danger Alert&lt;/button&gt;
&lt;/div&gt;
</code>
</pre>
</div>
<div class="px-4">
<h4 class="card-title">Modal Position</h4>
</div>
<div class="row justify-content-center bg-light p-5 mt-4">
<div class="col-md-7">
<div class="card shadow-sm">
<div class="p-4 text-center">
<!-- 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>
</div>
</div>
</div>
<div class="px-4">
<h4 class="card-title mt-4">Code Here</h4>
<hr>
<pre class="highlight html">
<code class="shadow-sm px-4" style="height: 300px;">
&lt;!-- Top modal content --&gt;
&lt;div id=&quot;top-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-top&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;topModalLabel&quot;&gt;Modal Heading&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5&gt;Text in a modal&lt;/h5&gt;
&lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Right modal content --&gt;
&lt;div id=&quot;right-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-sm modal-right&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header border-0&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;div class=&quot;text-center&quot;&gt;
&lt;h4 class=&quot;mt-0&quot;&gt;Text in a modal&lt;/h4&gt;
&lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
&lt;/p&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger btn-sm&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Bottom modal content --&gt;
&lt;div id=&quot;bottom-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-sm modal-bottom&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;bottomModalLabel&quot;&gt;Modal Heading&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5&gt;Text in a modal&lt;/h5&gt;
&lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Center modal content --&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;centermodal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-dialog-centered&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;myCenterModalLabel&quot;&gt;Center modal&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5&gt;Overflowing text to show scroll behavior&lt;/h5&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;div class=&quot;btn-list&quot;&gt;
&lt;!-- Top modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#top-modal&quot;&gt;Top Modal&lt;/button&gt;
&lt;!-- Bottom modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#bottom-modal&quot;&gt;Bottom Modal&lt;/button&gt;
&lt;!-- Center modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#centermodal&quot;&gt;Center modal&lt;/button&gt;
&lt;!-- Right modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#right-modal&quot;&gt;Rightbar Modal&lt;/button&gt;
&lt;/div&gt;
</code>
</pre>
</div>
<div class="px-4">
<h4 class="card-title">Colored Header Modals</h4>
</div>
<div class="row justify-content-center bg-light p-5 mt-4">
<div class="col-md-7">
<div class="card shadow-sm">
<div class="p-4 text-center">
<!-- 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>
</div>
</div>
</div>
<div class="px-4">
<h4 class="card-title mt-4">Code Here</h4>
<hr>
<pre class="highlight html">
<code class="shadow-sm px-4" style="height: 300px;">
&lt;!-- Primary Header Modal --&gt;
&lt;div id=&quot;primary-header-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;primary-header-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header modal-colored-header bg-primary&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;primary-header-modalLabel&quot;&gt;Modal Heading
&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5 class=&quot;mt-0&quot;&gt;Primary Background&lt;/h5&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Success Header Modal --&gt;
&lt;div id=&quot;success-header-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;success-header-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header modal-colored-header bg-success&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;success-header-modalLabel&quot;&gt;Modal Heading
&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5 class=&quot;mt-0&quot;&gt;Success Background&lt;/h5&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Info Header Modal --&gt;
&lt;div id=&quot;info-header-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;info-header-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header modal-colored-header bg-info&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;info-header-modalLabel&quot;&gt;Modal Heading&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5 class=&quot;mt-0&quot;&gt;Info Background&lt;/h5&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Warning Header Modal --&gt;
&lt;div id=&quot;warning-header-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;warning-header-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header modal-colored-header bg-warning&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;warning-header-modalLabel&quot;&gt;Modal Heading
&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5 class=&quot;mt-0&quot;&gt;Warning Background&lt;/h5&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Danger Header Modal --&gt;
&lt;div id=&quot;danger-header-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;danger-header-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header modal-colored-header bg-danger&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;danger-header-modalLabel&quot;&gt;Modal Heading&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5 class=&quot;mt-0&quot;&gt;Danger Background&lt;/h5&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Dark Header Modal --&gt;
&lt;div id=&quot;dark-header-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;dark-header-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header modal-colored-header bg-dark&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;dark-header-modalLabel&quot;&gt;Modal Heading&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5 class=&quot;mt-0&quot;&gt;Dark Background&lt;/h5&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot;&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;div class=&quot;btn-list&quot;&gt;
&lt;!-- Primary header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#primary-header-modal&quot;&gt;Primary Header&lt;/button&gt;
&lt;!-- Success header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#success-header-modal&quot;&gt;Success Header&lt;/button&gt;
&lt;!-- Info header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#info-header-modal&quot;&gt;Info Header&lt;/button&gt;
&lt;!-- Warning header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#warning-header-modal&quot;&gt;Warning Header&lt;/button&gt;
&lt;!-- Danger header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#danger-header-modal&quot;&gt;Danger Header&lt;/button&gt;
&lt;!-- Dark header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#dark-header-modal&quot;&gt;Dark Header&lt;/button&gt;
&lt;/div&gt;
</code>
</pre>
</div>
<div class="px-4">
<h4 class="card-title">Filled Modals</h4>
</div>
<div class="row justify-content-center bg-light p-5 mt-4">
<div class="col-md-7">
<div class="card shadow-sm">
<div class="p-4 text-center">
<!-- 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>
</div>
</div>
</div>
<div class="px-4">
<h4 class="card-title mt-4">Code Here</h4>
<hr>
<pre class="highlight html">
<code class="shadow-sm px-4" style="height: 300px;">
&lt;div id=&quot;fill-primary-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;fill-primary-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content modal-filled bg-primary&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;fill-primary-modalLabel&quot;&gt;Primary Filled
Modal&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Save
changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Success Filled Modal --&gt;
&lt;div id=&quot;fill-success-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;fill-success-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content modal-filled bg-success&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;fill-success-modalLabel&quot;&gt;Success Filled
Modal&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Save
changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Info Filled Modal --&gt;
&lt;div id=&quot;fill-info-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;fill-info-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content modal-filled bg-info&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;fill-info-modalLabel&quot;&gt;Info Filled Modal&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Save
changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Warning Filled Modal --&gt;
&lt;div id=&quot;fill-warning-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;fill-warning-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content modal-filled bg-warning&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;fill-warning-modalLabel&quot;&gt;Warning Filled
Modal&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Save
changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Danger Filled Modal --&gt;
&lt;div id=&quot;fill-danger-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;fill-danger-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content modal-filled bg-danger&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;fill-danger-modalLabel&quot;&gt;Danger Filled Modal
&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Save
changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Dark Filled Modal --&gt;
&lt;div id=&quot;fill-dark-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;fill-dark-modalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content modal-filled bg-dark&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;fill-dark-modalLabel&quot;&gt;Dark Filled Modal&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Save
changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;div class=&quot;btn-list&quot;&gt;
&lt;!-- Primary header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#fill-primary-modal&quot;&gt;Primary Filled&lt;/button&gt;
&lt;!-- Success header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#fill-success-modal&quot;&gt;Success Filled&lt;/button&gt;
&lt;!-- Info header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#fill-info-modal&quot;&gt;Info Filled&lt;/button&gt;
&lt;!-- Warning header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#fill-warning-modal&quot;&gt;Warning Filled&lt;/button&gt;
&lt;!-- Danger header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#fill-danger-modal&quot;&gt;Danger Filled&lt;/button&gt;
&lt;!-- Dark header modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#fill-dark-modal&quot;&gt;Dark Filled&lt;/button&gt;
&lt;/div&gt;
</code>
</pre>
</div>
<div class="px-4">
<h4 class="card-title">Multiple Modal</h4>
</div>
<div class="row justify-content-center bg-light p-5 mt-4">
<div class="col-md-7">
<div class="card shadow-sm">
<div class="p-4 text-center">
<!-- 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>
</div>
</div>
</div>
<div class="px-4">
<h4 class="card-title mt-4">Code Here</h4>
<hr>
<pre class="highlight html">
<code class="shadow-sm px-4" style="height: 300px;">
&lt;div id=&quot;multiple-one&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;multiple-oneModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;multiple-oneModalLabel&quot;&gt;Modal Heading&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5 class=&quot;mt-0&quot;&gt;Text in a modal&lt;/h5&gt;
&lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;
data-target=&quot;#multiple-two&quot; data-toggle=&quot;modal&quot;
data-dismiss=&quot;modal&quot;&gt;Next&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;!-- Modal --&gt;
&lt;div id=&quot;multiple-two&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;multiple-twoModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h4 class=&quot;modal-title&quot; id=&quot;multiple-twoModalLabel&quot;&gt;Modal Heading&lt;/h4&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;h5 class=&quot;mt-0&quot;&gt;Text in a modal&lt;/h5&gt;
&lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;
data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;
&lt;div class=&quot;btn-list&quot;&gt;
&lt;!-- Top modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;modal&quot;
data-target=&quot;#multiple-one&quot;&gt;Multiple Modal&lt;/button&gt;
&lt;/div&gt;
</code>
</pre>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer text-center">
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 Page -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../src/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../src/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../src/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- apps -->
<script src="../src/dist/js/app-style-switcher.js"></script>
<script src="../src/dist/js/feather.min.js"></script>
<script src="../src/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="../src/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="../src/dist/js/custom.min.js"></script>
<script src="highlights/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<!-- End JS -->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink