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.

This is default callout with fa fa-user icon 
<callout icon="fa fa-user"> [...] </callout>
This is success callout with 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