Bootstrap - Alerts

We have styled all Bootstrap elements just as you want!

Toggle Code!
Talk to usSettings

Basic Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Wrap any text and an optional dismiss button in .alertand one of the four contextual classes (e.g., .alert-success) for basic alert messages.

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger. 

<div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read this important alert message. </div><div class="alert alert-info" role="alert"> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div><div class="alert alert-warning" role="alert"> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div><div class="alert alert-danger" role="alert"> <strong>Oh snap!</strong> Change a few things up and try submitting again. </div>

Dismissible Alerts

Build on any alert by adding an optional .alert-dismissibleand close button. 

<div class="alert alert-warning alert-dismissible" role="alert">    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>    <strong>Warning!</strong> Better check yourself, you're not looking too good.</div><div class="alert alert-success" role="alert">    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>    <strong>Well done!</strong> You successfully read this important alert message.</div><div class="alert alert-info" role="alert">    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div><div class="alert alert-danger" role="alert">    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>    <strong>Oh snap!</strong> Change a few things up and try submitting again.</div>

Modified Alerts

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

<div class="col-md-12 mb-15">    <div class="alert alert-success left-icon-alert" role="alert">        <strong>Well done!</strong> You successfully read this important alert message.    </div>    <div class="alert alert-info left-icon-alert" role="alert">        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.    </div>    <div class="alert alert-warning left-icon-alert" role="alert">        <strong>Warning!</strong> Better check yourself, you're not looking too good.    </div>    <div class="alert alert-danger left-icon-alert" role="alert">        <strong>Oh snap!</strong> Change a few things up and try submitting again.    </div></div><!-- /.col-md-12 --><div class="col-md-12 mb-15">    <div class="alert alert-success right-icon-alert" role="alert">        <strong>Well done!</strong> You successfully read this important alert message.    </div>    <div class="alert alert-info right-icon-alert" role="alert">        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.    </div>    <div class="alert alert-warning right-icon-alert" role="alert">        <strong>Warning!</strong> Better check yourself, you're not looking too good.    </div>    <div class="alert alert-danger right-icon-alert" role="alert">        <strong>Oh snap!</strong> Change a few things up and try submitting again.    </div></div><!-- /.col-md-12 -->

Links in Alerts

Use the .alert-linkutility class to quickly provide matching colored links within any alert. 

<div class="alert alert-success" role="alert">    <strong>Well done!</strong> You successfully read    <a href="#" class="alert-link">this important alert message</a>.</div><div class="alert alert-info" role="alert">    <strong>Heads up!</strong> This    <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.</div><div class="alert alert-warning" role="alert">    <strong>Warning!</strong> Better check yourself, you're    <a href="#" class="alert-link">not looking too good</a>.</div><div class="alert alert-danger" role="alert">    <strong>Oh snap!</strong>    <a href="#" class="alert-link">Change a few things up</a>and try submitting again.</div>

Useful Sidebar

Code for help is added within the main page. Check for code below the example.

You can use this sidebar to help your end-users. You can enter any HTML in this sidebar.

This sidebar can be a 'fixed to top' or you can unpin it to scroll with main page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.