How to add callouts to your bootstrap directory

Guys,

Have a look on below image..

10-02-2014 16-13-59

 

This functionality is names as callouts of bootstrap..which are not default for now.

Its pretty simple to add to your css and use it..

Just paste this code in bootstrap.min.css

/* Base styles (regardless of theme) */
.bs-callout {
margin: 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
.bs-callout h4 {
margin-top: 0;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
background-color: #fcf2f2;
border-color: #d9534f;
}
.bs-callout-warning {
background-color: #fefbed;
border-color: #f0ad4e;
}
.bs-callout-info {
background-color: #f0f7fd;
border-color: #5bc0de;
}

Usage:

<div class=”bs-callout bs-callout-info”>Search Results</div>

<div class=”bs-callout bs-callout-warning”>Search Results</div>

<div class=”bs-callout bs-callout-danger”>Search Results</div>

Advertisements