BootStrap Alerts

success

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action

Or do this

info

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action

Or do this

danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action

Or do this

default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action

Or do this

light

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action

Or do this

lighter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action

Or do this

dark

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action

Or do this

darker

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action

Or do this

warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action

Or do this

Using Alerts

<div class="col-md-4"> 
<div class="alert alert-success fade in"> <p> <i class="fa fa-trophy"></i> <strong>success</strong> </p> 
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> <div class="btn btn-darker">Take this action</div> <div class="btn btn-dark">Or do this</div> </p> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="alert alert-info fade in"> <p> <i class="fa fa-trophy"></i> <strong>info</strong> </p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> <div class="btn btn-primary">Take this action</div> <div class="btn btn-neutral">Or do this</div> </p> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="alert alert-danger fade in"> <p> <i class="fa fa-trophy"></i> <strong>danger</strong> </p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
<p> <div class="btn btn-info">Take this action</div> <div class="btn btn-default">Or do this</div> </p> 
</div> 
</div>
<div class="column clearfix"> 
<div class="col-md-4"> 
<div class="alert alert-default fade in"> <p> <i class="fa fa-trophy"></i> <strong>default</strong> </p> 
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> <div class="btn btn-darker">Take this action</div> <div class="btn btn-dark">Or do this</div> </p> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="alert alert-light fade in"> <p> <i class="fa fa-trophy"></i> <strong>light</strong> </p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> <div class="btn btn-primary">Take this action</div> <div class="btn btn-neutral">Or do this</div> </p> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="alert alert-lighter fade in"> <p> <i class="fa fa-trophy"></i> <strong>lighter</strong> </p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
<p> <div class="btn btn-info">Take this action</div> <div class="btn btn-default">Or do this</div> </p> 
</div> 
</div> 
</div>
<div class="column clearfix"> 
<div class="col-md-4"> 
<div class="alert alert-dark fade in"> <p> <i class="fa fa-trophy"></i> <strong>dark</strong> </p> 
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> <div class="btn btn-darker">Take this action</div> <div class="btn btn-dark">Or do this</div> </p> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="alert alert-darker fade in"> <p> <i class="fa fa-trophy"></i> <strong>darker</strong> </p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> <div class="btn btn-primary">Take this action</div> <div class="btn btn-neutral">Or do this</div> </p> 
</div> 
</div>
<div class="col-md-4"> 
<div class="alert alert-warning fade in"> <p> <i class="fa fa-trophy"></i> <strong>warning</strong> </p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
<p> <div class="btn btn-info">Take this action</div> <div class="btn btn-default">Or do this</div> </p> 
</div> 
</div>