Bootstrap Caret

Create talk bubble styled elements in a seconds.

Example

Default caret position is top start. That allows fast creation of “reply forms”, for example.

Simple talk bubble

Overview

Element with .caret class gets a small triangle on the one of it side that mimics a “talk bubble” style. Default caret position is top start, but this can be changed with data-tor-caret={side position} attribute. This can be used when creating forms, author quotes or even Dropdown components. Caret can be placed on top, right, bottom and left side of the component and on start, middle and end position of each side. Caret color is automatically inherited from its parent!

Caret position

Top

To place the caret on the top side of the component add data-tor-caret="top <start|middle|end>" attribute to your element.

Top start
Top middle
Top end
<div data-tor-caret="top start">Top start</div>
<div data-tor-caret="top middle">Top start</div>
<div data-tor-caret="top end">Top start</div>

To place the caret on the right side of the component add data-tor-caret="right <start|middle|end>" attribute to your element.

Right start
Right middle
Right end
<div data-tor-caret="right start">Right start</div>
<div data-tor-caret="right middle">Right start</div>
<div data-tor-caret="right end">Right start</div>

Bottom

To place the caret on the bottom side of the component add data-tor-caret="bottom <start|middle|end>" attribute to your element.

Bottom start
Bottom middle
Bottom end
<div data-tor-caret="bottom start">Bottom start</div>
<div data-tor-caret="bottom middle">Bottom start</div>
<div data-tor-caret="bottom end">Bottom start</div>

Left

To place the caret on the left side of the component add data-tor-caret="left <start|middle|end>" attribute to your element.

Left start
Left middle
Left end
<div data-tor-caret="left start">Left start</div>
<div data-tor-caret="left middle">Left middle</div>
<div data-tor-caret="left end">Left end</div>

Caret color

Caret color is automatically inherited from it’s parent background color.

............
<span class="p-3 bg-primary" data-tor-caret="top start">...</span>
<span class="p-3 bg-secondary" data-tor-caret="top start">...</span>
<span class="p-3 bg-maroon" data-tor-caret="top start">...</span>
<span class="p-3" data-tor-caret="top start" data-fx="bg[#410fb1]">...</span>