You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
650 lines
52 KiB
650 lines
52 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Alerts | Hyper - Responsive Bootstrap 4 Admin Dashboard</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
|
|
<meta content="Coderthemes" name="author" />
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<!-- App css -->
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
|
|
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
|
|
|
|
</head>
|
|
|
|
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
|
|
<!-- Begin page -->
|
|
<div class="wrapper">
|
|
@@include('./partials/left-sidebar.html')
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start Page Content here -->
|
|
<!-- ============================================================== -->
|
|
|
|
<div class="content-page">
|
|
<div class="content">
|
|
@@include('./partials/topbar.html')
|
|
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box">
|
|
<div class="page-title-right">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">Base UI</a></li>
|
|
<li class="breadcrumb-item active">Alerts</li>
|
|
</ol>
|
|
</div>
|
|
<h4 class="page-title">Alerts</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title">Default Alert</h4>
|
|
<p class="text-muted font-14 mb-3">
|
|
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
|
|
Alerts are available for any length of text, as well as an optional dismiss
|
|
button.
|
|
</p>
|
|
<p>
|
|
For proper styling, use one of the eight
|
|
<strong>required</strong> contextual classes (e.g.,
|
|
<code>.alert-success</code>). For background color use class
|
|
<code>.bg-* </code>, <code>.text-white </code>
|
|
</p>
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
<li class="nav-item">
|
|
<a href="#default-alert-preview" data-toggle="tab" aria-expanded="false"
|
|
class="nav-link active">
|
|
Preview
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#default-alert-code" data-toggle="tab" aria-expanded="true"
|
|
class="nav-link">
|
|
Code
|
|
</a>
|
|
</li>
|
|
</ul> <!-- end nav-->
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane show active" id="default-alert-preview">
|
|
<div class="alert alert-primary" role="alert">
|
|
<strong>Primary - </strong> A simple primary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-secondary" role="alert">
|
|
<strong>Secondary - </strong> A simple secondary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-success" role="alert">
|
|
<strong>Success - </strong> A simple success alert—check it out!
|
|
</div>
|
|
<div class="alert alert-danger" role="alert">
|
|
<strong>Error - </strong> A simple danger alert—check it out!
|
|
</div>
|
|
<div class="alert alert-warning bg-warning text-white border-0"
|
|
role="alert">
|
|
<strong>Warning - </strong> A simple warning alert—check it out!
|
|
</div>
|
|
<div class="alert alert-info bg-info text-white border-0" role="alert">
|
|
<strong>Info - </strong> A simple info alert—check it out!
|
|
</div>
|
|
<div class="alert alert-light bg-light text-dark border-0" role="alert">
|
|
<strong>Light - </strong> A simple light alert—check it out!
|
|
</div>
|
|
<div class="alert alert-dark bg-dark text-white border-0 mb-0" role="alert">
|
|
<strong>Dark - </strong> A simple dark alert—check it out!
|
|
</div>
|
|
</div> <!-- end preview-->
|
|
|
|
<div class="tab-pane" id="default-alert-code">
|
|
<pre class="mb-0">
|
|
<span class="html escape">
|
|
<div class="alert alert-primary" role="alert">
|
|
<strong>Primary - </strong> A simple primary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-secondary" role="alert">
|
|
<strong>Secondary - </strong> A simple secondary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-success" role="alert">
|
|
<strong>Success - </strong> A simple success alert—check it out!
|
|
</div>
|
|
<div class="alert alert-danger" role="alert">
|
|
<strong>Error - </strong> A simple danger alert—check it out!
|
|
</div>
|
|
<div class="alert alert-warning bg-warning text-white border-0" role="alert">
|
|
<strong>Warning - </strong> A simple warning alert—check it out!
|
|
</div>
|
|
<div class="alert alert-info bg-info text-white border-0" role="alert">
|
|
<strong>Info - </strong> A simple info alert—check it out!
|
|
</div>
|
|
<div class="alert alert-light bg-light text-dark border-0" role="alert">
|
|
<strong>Light - </strong> A simple light alert—check it out!
|
|
</div>
|
|
<div class="alert alert-dark bg-dark text-white border-0 mb-0" role="alert">
|
|
<strong>Dark - </strong> A simple dark alert—check it out!
|
|
</div>
|
|
</span>
|
|
</pre> <!-- end highlight-->
|
|
</div> <!-- end preview code-->
|
|
</div> <!-- end tab-content-->
|
|
|
|
</div> <!-- end card-body-->
|
|
</div> <!-- end card-->
|
|
</div> <!-- end col-->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title">Dismissing Alerts</h4>
|
|
<p class="text-muted font-14 mb-3">
|
|
Add a dismiss button and the <code>.alert-dismissible</code> class, which adds
|
|
extra padding to the right of the alert
|
|
and positions the <code>.close</code> button.
|
|
</p>
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
<li class="nav-item">
|
|
<a href="#dismissing-alerts-preview" data-toggle="tab" aria-expanded="false"
|
|
class="nav-link active">
|
|
Preview
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#dismissing-alerts-code" data-toggle="tab" aria-expanded="true"
|
|
class="nav-link">
|
|
Code
|
|
</a>
|
|
</li>
|
|
</ul> <!-- end nav-->
|
|
<div class="tab-content">
|
|
<div class="tab-pane show active" id="dismissing-alerts-preview">
|
|
<div class="alert alert-primary alert-dismissible bg-primary text-white border-0 fade show"
|
|
role="alert">
|
|
<button type="button" class="close" data-dismiss="alert"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Primary - </strong> A simple primary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-secondary alert-dismissible bg-secondary text-white border-0 fade show"
|
|
role="alert">
|
|
<button type="button" class="close" data-dismiss="alert"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Secondary - </strong> A simple secondary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-success alert-dismissible bg-success text-white border-0 fade show"
|
|
role="alert">
|
|
<button type="button" class="close" data-dismiss="alert"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Success - </strong> A simple success alert—check it out!
|
|
</div>
|
|
<div class="alert alert-danger alert-dismissible bg-danger text-white border-0 fade show"
|
|
role="alert">
|
|
<button type="button" class="close" data-dismiss="alert"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Error - </strong> A simple danger alert—check it out!
|
|
</div>
|
|
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Warning - </strong> A simple warning alert—check it out!
|
|
</div>
|
|
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Info - </strong> A simple info alert—check it out!
|
|
</div>
|
|
<div class="alert alert-light alert-dismissible fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Light - </strong> A simple light alert—check it out!
|
|
</div>
|
|
<div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert"
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Dark - </strong> A simple dark alert—check it out!
|
|
</div>
|
|
</div> <!-- end preview-->
|
|
|
|
<div class="tab-pane" id="dismissing-alerts-code">
|
|
<div class="highlight">
|
|
<pre class="mb-0">
|
|
<span class="html escape">
|
|
<div class="alert alert-primary alert-dismissible bg-primary text-white border-0 fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">&times;</span>
|
|
</button>
|
|
<strong>Primary - </strong> A simple primary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-secondary alert-dismissible bg-secondary text-white border-0 fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">&times;</span>
|
|
</button>
|
|
<strong>Secondary - </strong> A simple secondary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-success alert-dismissible bg-success text-white border-0 fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">&times;</span>
|
|
</button>
|
|
<strong>Success - </strong> A simple success alert—check it out!
|
|
</div>
|
|
<div class="alert alert-danger alert-dismissible bg-danger text-white border-0 fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">&times;</span>
|
|
</button>
|
|
<strong>Error - </strong> A simple danger alert—check it out!
|
|
</div>
|
|
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">&times;</span>
|
|
</button>
|
|
<strong>Warning - </strong> A simple warning alert—check it out!
|
|
</div>
|
|
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">&times;</span>
|
|
</button>
|
|
<strong>Info - </strong> A simple info alert—check it out!
|
|
</div>
|
|
<div class="alert alert-light alert-dismissible fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">&times;</span>
|
|
</button>
|
|
<strong>Light - </strong> A simple light alert—check it out!
|
|
</div>
|
|
<div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">&times;</span>
|
|
</button>
|
|
<strong>Dark - </strong> A simple dark alert—check it out!
|
|
</div>
|
|
</span>
|
|
</pre> <!-- end pre -->
|
|
</div> <!-- end highlight-->
|
|
</div> <!-- end preview code-->
|
|
</div> <!-- end tab-content-->
|
|
|
|
</div> <!-- end card-body-->
|
|
</div> <!-- end card-->
|
|
</div> <!-- end col-->
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title">Custom Alerts</h4>
|
|
<p class="text-muted font-14 mb-3">
|
|
Display alert with transparent background and with contextual text color. Use
|
|
classes
|
|
<code>.bg-white</code>, and <code>.text-*</code>. E.g. <code>bg-white
|
|
text-primary</code>.
|
|
</p>
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
<li class="nav-item">
|
|
<a href="#custom-alerts-preview" data-toggle="tab" aria-expanded="false"
|
|
class="nav-link active">
|
|
Preview
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#custom-alerts-code" data-toggle="tab" aria-expanded="true"
|
|
class="nav-link">
|
|
Code
|
|
</a>
|
|
</li>
|
|
</ul> <!-- end nav-->
|
|
<div class="tab-content">
|
|
<div class="tab-pane show active" id="custom-alerts-preview">
|
|
<div class="alert alert-primary bg-white text-primary" role="alert">
|
|
This is a <strong>primary</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-secondary bg-white text-secondary" role="alert">
|
|
This is a <strong>secondary</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-success bg-white text-success" role="alert">
|
|
This is a <strong>success</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-info bg-white text-info" role="alert">
|
|
This is a <strong>info</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-warning bg-white text-warning" role="alert">
|
|
This is a <strong>warning</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-danger bg-white text-danger" role="alert">
|
|
This is a <strong>danger</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-light bg-white text-light" role="alert">
|
|
This is a <strong>light</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-dark bg-white text-dark mb-0" role="alert">
|
|
This is a <strong>dark</strong> alert—check it out!
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="custom-alerts-code">
|
|
<div class="highlight">
|
|
<pre class="mb-0">
|
|
<span class="html escape">
|
|
<div class="alert alert-primary bg-white text-primary" role="alert">
|
|
This is a <strong>primary</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-secondary bg-white text-secondary" role="alert">
|
|
This is a <strong>secondary</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-success bg-white text-success" role="alert">
|
|
This is a <strong>success</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-info bg-white text-info" role="alert">
|
|
This is a <strong>info</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-warning bg-white text-warning" role="alert">
|
|
This is a <strong>warning</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-danger bg-white text-danger" role="alert">
|
|
This is a <strong>danger</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-light bg-white text-light" role="alert">
|
|
This is a <strong>light</strong> alert—check it out!
|
|
</div>
|
|
<div class="alert alert-dark bg-white text-dark" role="alert">
|
|
This is a <strong>dark</strong> alert—check it out!
|
|
</div>
|
|
</span>
|
|
</pre> <!-- end pre -->
|
|
</div> <!-- end highlight-->
|
|
</div>
|
|
</div> <!-- end tab-content-->
|
|
</div> <!-- end card-body-->
|
|
</div> <!-- end card-->
|
|
</div> <!-- end col-->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title">Link Color</h4>
|
|
<p class="text-muted font-14 mb-3">
|
|
Use the <code>.alert-link</code> utility class to quickly provide matching
|
|
colored links within any alert.
|
|
</p>
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
<li class="nav-item">
|
|
<a href="#link-color-preview" data-toggle="tab" aria-expanded="false"
|
|
class="nav-link active">
|
|
Preview
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#link-color-code" data-toggle="tab" aria-expanded="true"
|
|
class="nav-link">
|
|
Code
|
|
</a>
|
|
</li>
|
|
</ul> <!-- end nav-->
|
|
<div class="tab-content">
|
|
<div class="tab-pane show active" id="link-color-preview">
|
|
<div class="alert alert-primary" role="alert">
|
|
A simple primary alert with <a href="#" class="alert-link">an example
|
|
link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-secondary" role="alert">
|
|
A simple secondary alert with <a href="#" class="alert-link">an example
|
|
link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-success" role="alert">
|
|
A simple success alert with <a href="#" class="alert-link">an example
|
|
link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-danger" role="alert">
|
|
A simple danger alert with <a href="#" class="alert-link">an example
|
|
link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-warning" role="alert">
|
|
A simple warning alert with <a href="#" class="alert-link">an example
|
|
link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-info" role="alert">
|
|
A simple info alert with <a href="#" class="alert-link">an example
|
|
link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-light" role="alert">
|
|
A simple light alert with <a href="#" class="alert-link">an example
|
|
link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-dark" role="alert">
|
|
A simple dark alert with <a href="#" class="alert-link">an example
|
|
link</a>. Give it a click if you like.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="link-color-code">
|
|
<div class="highlight">
|
|
<pre class="mb-0">
|
|
<span class="html escape">
|
|
<div class="alert alert-primary" role="alert">
|
|
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-secondary" role="alert">
|
|
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-success" role="alert">
|
|
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-danger" role="alert">
|
|
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-warning" role="alert">
|
|
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-info" role="alert">
|
|
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-light" role="alert">
|
|
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-dark" role="alert">
|
|
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
</span>
|
|
</pre> <!-- end pre -->
|
|
</div> <!-- end highlight-->
|
|
</div>
|
|
</div> <!-- end tab-content-->
|
|
|
|
</div> <!-- end card-body-->
|
|
</div> <!-- end card-->
|
|
</div> <!-- end col-->
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title">Icons with Alerts</h4>
|
|
<p class="text-muted font-14 mb-3">
|
|
You can also include additional elements like icons, heading, etc along side the actual message.
|
|
</p>
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
<li class="nav-item">
|
|
<a href="#icon-alerts-preview" data-toggle="tab" aria-expanded="false"
|
|
class="nav-link active">
|
|
Preview
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#icon-alerts-code" data-toggle="tab" aria-expanded="true"
|
|
class="nav-link">
|
|
Code
|
|
</a>
|
|
</li>
|
|
</ul> <!-- end nav-->
|
|
<div class="tab-content">
|
|
<div class="tab-pane show active" id="icon-alerts-preview">
|
|
<div class="alert alert-success" role="alert">
|
|
<i class="dripicons-checkmark mr-2"></i> This is a
|
|
<strong>success</strong> alert - check it out!
|
|
</div>
|
|
<div class="alert alert-danger" role="alert">
|
|
<i class="dripicons-wrong mr-2"></i> This is a <strong>danger</strong>
|
|
alert - check it out!
|
|
</div>
|
|
<div class="alert alert-warning" role="alert">
|
|
<i class="dripicons-warning mr-2"></i> This is a
|
|
<strong>warning</strong> alert - check it out!
|
|
</div>
|
|
<div class="alert alert-info mb-0" role="alert">
|
|
<i class="dripicons-information mr-2"></i> This is a
|
|
<strong>info</strong> alert - check it out!
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="icon-alerts-code">
|
|
<div class="highlight">
|
|
<pre class="mb-0">
|
|
<span class="html escape">
|
|
<div class="alert alert-success" role="alert">
|
|
<i class="dripicons-checkmark mr-2"></i> This is a <strong>success</strong> alert - check it out!
|
|
</div>
|
|
<div class="alert alert-danger" role="alert">
|
|
<i class="dripicons-wrong mr-2"></i> This is a <strong>danger</strong> alert - check it out!
|
|
</div>
|
|
<div class="alert alert-warning" role="alert">
|
|
<i class="dripicons-warning mr-2"></i> This is a <strong>warning</strong> alert - check it out!
|
|
</div>
|
|
<div class="alert alert-info" role="alert">
|
|
<i class="dripicons-information mr-2"></i> This is a <strong>info</strong> alert - check it out!
|
|
</div>
|
|
</span>
|
|
</pre> <!-- end pre -->
|
|
</div> <!-- end highlight-->
|
|
</div>
|
|
</div> <!-- end tab-content-->
|
|
|
|
</div> <!-- end card-body-->
|
|
</div> <!-- end card-->
|
|
</div> <!-- end col-->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title">Additional content</h4>
|
|
<p class="text-muted font-14 mb-3">
|
|
Alerts can also contain additional HTML elements like headings, paragraphs and
|
|
dividers.
|
|
</p>
|
|
|
|
<ul class="nav nav-tabs nav-bordered mb-3">
|
|
<li class="nav-item">
|
|
<a href="#additional-content-preview" data-toggle="tab"
|
|
aria-expanded="false" class="nav-link active">
|
|
Preview
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#additional-content-code" data-toggle="tab" aria-expanded="true"
|
|
class="nav-link">
|
|
Code
|
|
</a>
|
|
</li>
|
|
</ul> <!-- end nav-->
|
|
<div class="tab-content">
|
|
<div class="tab-pane show active" id="additional-content-preview">
|
|
<div class="alert alert-success mb-0" role="alert">
|
|
<h4 class="alert-heading">Well done!</h4>
|
|
<p>Aww yeah, you successfully read this important alert message. This
|
|
example text is going to run a bit longer so that you can see how
|
|
spacing within an alert works with this kind of content.</p>
|
|
<hr>
|
|
<p class="mb-0">Whenever you need to, be sure to use margin utilities to
|
|
keep things nice and tidy.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="additional-content-code">
|
|
<div class="highlight">
|
|
<pre class="mb-0">
|
|
<span class="html escape">
|
|
<div class="alert alert-success" role="alert">
|
|
<h4 class="alert-heading">Well done!</h4>
|
|
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
|
<hr>
|
|
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
|
</div>
|
|
</span>
|
|
</pre> <!-- end pre -->
|
|
</div> <!-- end highlight-->
|
|
</div>
|
|
</div> <!-- end tab-content-->
|
|
|
|
</div> <!-- end card-body-->
|
|
</div> <!-- end card-->
|
|
</div> <!-- end col-->
|
|
</div>
|
|
<!-- end row-->
|
|
|
|
</div> <!-- container -->
|
|
|
|
</div> <!-- content -->
|
|
|
|
@@include('./partials/footer.html')
|
|
|
|
</div>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- End Page content -->
|
|
<!-- ============================================================== -->
|
|
|
|
|
|
</div>
|
|
<!-- END wrapper -->
|
|
|
|
|
|
@@include('./partials/right-sidebar.html')
|
|
|
|
|
|
<!-- bundle -->
|
|
<script src="assets/js/vendor.min.js"></script>
|
|
<script src="assets/js/app.min.js"></script>
|
|
|
|
<!-- demo js -->
|
|
<script src="assets/js/pages/demo.toastr.js"></script>
|
|
<!-- -->
|
|
|
|
</body>
|
|
|
|
</html>
|