Arrows Add to shortcut list

The arrow shown below is an element that can be injected onto almost any other element.

Default arrow

Simply use class arrow-default

Primary arrow

Simply use class arrow-primary

Success arrow

Simply use class arrow-success

Info arrow

Simply use class arrow-info

Warning arrow

Simply use class arrow-warning

Danger arrow

Simply use class arrow-danger

Danger outline arrow

Simply use class arrow-outline-danger

Warning outline arrow

Simply use class arrow-outline-warning

Info outline arrow

Simply use class arrow-outline-info

Success outline arrow

Simply use class arrow-outline-success

Primary outline arrow

Simply use class arrow-outline-primary

Default outline arrow

Simply use class arrow-outline-default

Arrow with hover state

Arrows with hover state, but only for links

It is sufficient for the element with the arrow element injected to have a relative position, while colour of the background, the border and text benefit from the arrow injected into it.

Sizes and Positions

In addition to three different sizes of the arrow, it can also be moved to different positions.

Large arrow (center)

Simply use class arrow-lg

Small arrow (center)

Simply use class arrow-sm

Default arrow (center)

No class required for default size.

Default arrow (center)

No class required for default size.

Size and distance from the edge of the element in which the arrow is injected may be changed by variables stated in the variables.scss.

Arrow with others

For more examples related to this component see also badges and labels.

Button with arrow

Simply use class arrow-down

256k

Button with arrow

Simply use class arrow-left

256k

Button with arrow

Simply use class arrow-right

256k

Button with arrow

Simply use class arrow-up

256k

Panel with arrow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, eaque totam cupiditate, debitis magni ipsa nostrum perspiciatis omnis, dignissimos mollitia deleniti expedita.

Panel with arrow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, eaque totam cupiditate, debitis magni ipsa nostrum perspiciatis omnis, dignissimos mollitia deleniti expedita.