Bootstrap alerts
by Plippie Plop
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label">alert:</label>
<div class="controls">
<span class="alert alert-success">alert-success</span>
</div>
</div>
<div class="control-group">
<label class="control-label">alert:</label>
<div class="controls">
<span class="alert alert-warning">alert-warning</span>
</div>
</div>
<div class="control-group">
<label class="control-label">alert:</label>
<div class="controls">
<span class="alert alert-danger">alert-danger</span>
</div>
</div>
<div class="control-group">
<label class="control-label">alert:</label>
<div class="controls">
<span class="alert alert-error">alert-error</span>
</div>
</div>
<div class="control-group">
<label class="control-label">alert:</label>
<div class="controls">
<span class="alert alert-info">alert-info</span>
</div>
</div>
<div class="control-group">
<label class="control-label">alert-block:</label>
<div class="controls">
<span class="alert alert-block alert-warning">alert-warning</span>
</div>
</div>
<div class="control-group">
<label class="control-label">alert-block:</label>
<div class="controls">
<span class="alert alert-block alert-info">alert-info</span>
</div>
</div>
<div class="control-group">
<label class="control-label">div alert dismiss:</label>
<div class="controls">
<div class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
alert-success</div>
</div>
</div>
<div class="control-group">
<label class="control-label">div alert dismiss with h4:</label>
...
CSS
.alert{
position:relative;
}
.form-horizontal {
margin: 2em;
margin-bottom: 0;
}
.control-group {
padding: 7px 15px;
margin-bottom: 0px;
border-top: 1px dotted rgb(204, 204, 204);
}
.control-group:first-child {
border-top: none;
}
.form-horizontal .controls span {
line-height: 30px;
}
.control-label {
margin-right: 5px;
font-weight: 800;
}