Learn how to add arrows at the live demo page.

You can also learn more here: Bootstrap Arrows source page


There are two ways to add arrows to your page:

  1. Manually (via HTML)
  2. Quick Arrow block

Below is how you would add arrows. This can be done through the HTML or standard content blocks. You could also hard-code this into your themes.

Rotating an Arrow

Let's say you want to display a green "success" arrow that points straight to the right. To do this, use the following:

<span class="arrow-success" rel="90"></span>

To rotate an arrow, enter a value (between 0 and 359) for rel.

For example, if you want to rotate the arrow so that it points straight down, you would assign a value of 180, like so:

<span class="arrow-warning" rel="180"></span>


Making Your Arrows Large

There are two sizes of each type of arrow: small and large. By default, all arrows are small. However, you can make them larger if you want.

Below is an example of a large "inverse" arrow, set to point to the left.

<span class="arrow-inverse-large" rel="270"></span>

Quick Arrow Block

Pretty self-explanitory. You can add this anywhere you want on your page, and optionally link the arrow to any page within your site!