Wrap any text and an optional dismiss button in .alert
for a basic warning alert message.
- <div class=«alert»>
- <button type=«button» class=«close» data-dismiss=«alert»>×</button>
- <strong>Warning!</strong> Best check yo self, you’re not looking too good.
- </div>
Dismiss buttons
Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert"
attribute, require an href="#"
for the dismissal of alerts when using an <a>
tag.
- <a href=«#» class=«close» data-dismiss=«alert»>×</a>
Alternatively, you may use a <button>
element with the data attribute, which we have opted to do for our docs. When using <button>
, you must include type="button"
or your forms may not submit.
- <button type=«button» class=«close» data-dismiss=«alert»>×</button>
Dismiss alerts via javascript
Use the alerts jQuery plugin for quick and easy dismissal of alerts.
Options
For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block
.
Warning!
Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class=«alert alert-block»>
- <button type=«button» class=«close» data-dismiss=«alert»>×</button>
- <h4>Warning!</h4>
- Best check yo self, you’re not…
- </div>
Contextual alternatives
Add optional classes to change an alert’s connotation.
Error or danger
- <div class=«alert alert-error»>
- …
- </div>
Success
- <div class=«alert alert-success»>
- …
- </div>
Information
- <div class=«alert alert-info»>
- …
- </div>