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.
<callout> === Default Callout === This is a default callout. </callout>
OR
<callout title="Default Callout"> This is a default callout. </callout>
This is a default callout.
This is a primary callout.
This is a success callout.
This is an info callout.
This is a warning callout.
This is a danger callout.
Create a contextual colors callout by adding icon=„true“
attribute.
This is a primary callout.
This is a success callout.
This is an info callout.
This is a warning 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>
This is a question callout (alias of important
).
This is a tip callout (alias of warning
).
<callout type="question" icon="true"> [...] </callout> <callout type="tip" icon="true"> [...] </callout>
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>
blue
) and icon (fa fa-user
)
<callout icon="fa fa-user" color="blue" title="Custom color + icon"> [...] </callout>
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 |