Callouts
What is the Callout component ?
The Bootstrap documentation has really nice callouts to draw attention to important information, but for some reason these callouts are not included in the actual Bootstrap distribution.
This plugin include the original Callout from Bootstrap documentation for info, warning and danger and the extension for default, success and primary from http://cpratt.co/twitter-bootstrap-callout-css-styles.
Basic usage
<callout> === Default Callout === This is a default callout. </callout>
OR
<callout title="Default Callout"> This is a default callout. </callout>
Default Callout
This is a default callout.
Contextual colors
Primary Callout
This is a primary callout.
Success Callout
This is a success callout.
Info Callout
This is an info callout.
Warning Callout
This is a warning callout.
Danger Callout
This is a danger callout.
Contextual Icons
Create a contextual colors callout by adding icon=“true” attribute.
Primary Callout
This is a primary callout.
Success Callout
This is a success callout.
Info Callout
This is an info callout.
Warning Callout
This is a warning callout.
Danger Callout
This is a danger callout.
<callout type="primary" icon="true"> [...] </callout> <callout type="success" icon="true"> [...] </callout> <callout type="info" icon="true"> [...] </callout> <callout type="warning" icon="true"> [...] </callout> <callout type="danger" icon="true"> [...] </callout>
Additional contextual icons
Question Callout
This is a question callout (alias of important).
Tip Callout
This is a tip callout (alias of warning).
<callout type="question" icon="true"> [...] </callout> <callout type="tip" icon="true"> [...] </callout>
Custom icons
Add custom icon via icon attribute.
fa fa-user icon
<callout icon="fa fa-user"> [...] </callout>
fa fa-plus icon
<callout type="success" icon="fa fa-plus"> [...] </callout>
Custom colors
Custom color + icon
This is callout with custom color (blue) and icon (fa fa-user)
<callout icon="fa fa-user" color="blue" title="Custom color + icon"> [...] </callout>
Options
| Attribute | Default Value | Allowed Values | Description |
|---|---|---|---|
type | default | default primary success info warning danger (question tip) | Type of callout question and tip are available only for icon attribute. |
title | Title of callout | ||
icon | true or icon class from Glyphicon or FontAwesome (eg. fa fa-plus) | Icon of callout | |
color | W3C Color name (eg. blue, orange, etc) or HEX (eg. #FF3300, #777) | Color of callout |
Giuseppe Di Terlizzi