Bootstrap Caret

Create talk bubble styled elements in a seconds.

Torus Kit new features for Caret
Caret position Caret color Caret outline


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

Default caret position
<div class="caret">Default caret position</div>


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-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


To place the caret on the top side of the component add .caret class to it and data-caret="top {start|middle|end}" attribute with caret position.

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

To place the caret on the right side of the component add .caret class to it and data-caret="right {start|middle|end}" attribute with caret position.

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


To place the caret on the bottom side of the component add .caret class to it and data-caret="bottom {start|middle|end}" attribute with caret position.

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


To place the caret on the left side of the component add .caret class to it and data-caret="left {start|middle|end}" attribute with caret position.

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

Caret color

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

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

Caret outline

White background only! Use .caret-outline class on .btn or .badge-*-outline to create outlined caret.


badge-primary-outline badge-danger-outline
<span class="badge badge-primary-outline caret-outline">badge-primary-outline</span>
<span class="badge badge-danger-outline caret-outline">badge-danger-outline</span>


<a href="#" class="btn btn-outline-primary caret-outline">badge-primary-outline</a>
<a href="#" class="btn btn-outline-danger caret-outline">badge-danger-outline</a>