Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here

Alert

Usage

Alerts are available for any length of text and includes many type of alerts

You can remove border-radius from alerts and other elements just adding .radius-none class

You can create an alert by simply adding class .alert and represent the alert type using classes of background, For Example: .success


<div class="alert success">
  An Alert
</div>

Available styles

Dismissable

You can create Dismissable alert by simply adding .dismissable class to .alert and inside the alert add .alert-close button, example shown below.


  <div class="alert primary dismissable">
    A simple primary alert &mdash; check it out!

    <!-- ALERT CLOSE -->
    <div class="alert-close">
      <i class="fa fa-close"></i>
    </div>
  </div>
  

        <!-- Primary -->
        <div class="alert primary dismissable" role="alert">
          A simple primary alert &mdash; check it out!

          <!-- ALERT CLOSE -->
          <div class="alert-close">
            <i class="fa fa-close"></i>
          </div>
        </div>

        <!-- Secondary -->
        <div class="alert secondary dismissable" role="alert">
          A simple secondary alert &mdash; check it out!

          <!-- ALERT CLOSE -->
          <div class="alert-close">
            <i class="fa fa-close"></i>
          </div>
        </div>
        
        <!-- Gray -->
        <div class="alert gray dismissable" role="alert">
          A simple gray alert &mdash; check it out!

          <!-- ALERT CLOSE -->
          <div class="alert-close">
            <i class="fa fa-close"></i>
          </div>
        </div>
        
        <!-- Success -->
        <div class="alert success dismissable" role="alert">
          A simple success alert &mdash; check it out!

          <!-- ALERT CLOSE -->
          <div class="alert-close">
            <i class="fa fa-close"></i>
          </div>
        </div>
        
        <!-- Danger -->
        <div class="alert danger dismissable" role="alert">
          A simple danger alert &mdash; check it out!

          <!-- ALERT CLOSE -->
          <div class="alert-close">
            <i class="fa fa-close"></i>
          </div>
        </div>
        
        <!-- Warning -->
        <div class="alert warning dismissable" role="alert">
          A simple warning alert &mdash; check it out!

          <!-- ALERT CLOSE -->
          <div class="alert-close">
            <i class="fa fa-close"></i>
          </div>
        </div>
        
        <!-- Info -->
        <div class="alert info dismissable" role="alert">
          A simple info alert &mdash; check it out!

          <!-- ALERT CLOSE -->
          <div class="alert-close">
            <i class="fa fa-close"></i>
          </div>
        </div>
        
        <!-- Dark -->
        <div class="alert dark dismissable" role="alert">
          A simple dark alert &mdash; check it out!

          <!-- ALERT CLOSE -->
          <div class="alert-close">
            <i class="fa fa-close"></i>
          </div>
        </div>
        

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Patreon