Elements
These modular elements can be readily used and customized across pages and in different blocks.
Alerts <> show code
<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> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
How to use
Alert is useful to provide feedback for perticuler user actions. Here’s the example of how to use it:
- Be sure you’ve loaded the compiled Bootstrap JavaScript.
- Use the .alert class to alert message wrapper
- Use the contextual class .alert-success , .alert-info , .alert-warning , .alert-danger with the .alert class for pre-styled alert
- To add link within alert message use .alert-link
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! This is alert link and try submitting again.
Dismissable alert with icon <> show code
<div class="iconic-alert">
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong><i class="fa fa-check"></i> Well done! </strong> You succesfully read this message
</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><i class="fa fa-info"></i> Warning!</strong> You should check in on some of those fields below.
</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><i class="fa fa-warning"></i> Warning!</strong> You should check in on some of those fields below.
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong><i class="fa fa-exclamation"></i> Warning!</strong> You should check in on some of those fields below.
</div>
</div>
How to use
- For the icon in the alert box use an class .iconic-alert in the parent wrapper
- Use any icon (here FontAwesome icon used) into an <i> element
Well done! You succesfully read this message
Warning! You should check in on some of those fields below.
Warning! You should check in on some of those fields below.
Warning! You should check in on some of those fields below.