• class='arrow'

  • class='arrow' data-angle='90'

  • class='arrow' data-angle='180'

  • class='arrow' data-angle='270'

  • class='arrow' data-angle='45'

  • class='arrow' data-angle='135'

  • class='arrow' data-angle='225'

  • class='arrow' data-angle='315'

  • class='arrow-large'

  • class='arrow-large' data-angle='90'

  • class='arrow-large' data-angle='180'

  • class='arrow-large' data-angle='270'

  • class='arrow-large' data-angle='45'

  • class='arrow-large' data-angle='135'

  • class='arrow-large' data-angle='225'

  • class='arrow-large' data-angle='315'

  • class='arrow-primary'

  • class='arrow-primary' data-angle='90'

  • class='arrow-primary' data-angle='180'

  • class='arrow-primary' data-angle='270'

  • class='arrow-primary' data-angle='45'

  • class='arrow-primary' data-angle='135'

  • class='arrow-primary' data-angle='225'

  • class='arrow-primary' data-angle='315'

  • class='arrow-primary-large'

  • class='arrow-primary-large' data-angle='90'

  • class='arrow-primary-large' data-angle='180'

  • class='arrow-primary-large' data-angle='270'

  • class='arrow-primary-large' data-angle='45'

  • class='arrow-primary-large' data-angle='135'

  • class='arrow-primary-large' data-angle='225'

  • class='arrow-primary-large' data-angle='315'

  • class='arrow-info'

  • class='arrow-info' data-angle='90'

  • class='arrow-info' data-angle='180'

  • class='arrow-info' data-angle='270'

  • class='arrow-info' data-angle='45'

  • class='arrow-info' data-angle='135'

  • class='arrow-info' data-angle='225'

  • class='arrow-info' data-angle='315'

  • class='arrow-info-large'

  • class='arrow-info-large' data-angle='90'

  • class='arrow-info-large' data-angle='180'

  • class='arrow-info-large' data-angle='270'

  • class='arrow-info-large' data-angle='45'

  • class='arrow-info-large' data-angle='135'

  • class='arrow-info-large' data-angle='225'

  • class='arrow-info-large' data-angle='315'

  • class='arrow-success'

  • class='arrow-success' data-angle='90'

  • class='arrow-success' data-angle='180'

  • class='arrow-success' data-angle='270'

  • class='arrow-success' data-angle='45'

  • class='arrow-success' data-angle='135'

  • class='arrow-success' data-angle='225'

  • class='arrow-success' data-angle='315'

  • class='arrow-success-large'

  • class='arrow-success-large' data-angle='90'

  • class='arrow-success-large' data-angle='180'

  • class='arrow-success-large' data-angle='270'

  • class='arrow-success-large' data-angle='45'

  • class='arrow-success-large' data-angle='135'

  • class='arrow-success-large' data-angle='225'

  • class='arrow-success-large' data-angle='315'

  • class='arrow-warning'

  • class='arrow-warning' data-angle='90'

  • class='arrow-warning' data-angle='180'

  • class='arrow-warning' data-angle='270'

  • class='arrow-warning' data-angle='45'

  • class='arrow-warning' data-angle='135'

  • class='arrow-warning' data-angle='225'

  • class='arrow-warning' data-angle='315'

  • class='arrow-warning-large'

  • class='arrow-warning-large' data-angle='90'

  • class='arrow-warning-large' data-angle='180'

  • class='arrow-warning-large' data-angle='270'

  • class='arrow-warning-large' data-angle='45'

  • class='arrow-warning-large' data-angle='135'

  • class='arrow-warning-large' data-angle='225'

  • class='arrow-warning-large' data-angle='315'

  • class='arrow-danger'

  • class='arrow-danger' data-angle='90'

  • class='arrow-danger' data-angle='180'

  • class='arrow-danger' data-angle='270'

  • class='arrow-danger' data-angle='45'

  • class='arrow-danger' data-angle='135'

  • class='arrow-danger' data-angle='225'

  • class='arrow-danger' data-angle='315'

  • class='arrow-danger-large'

  • class='arrow-danger-large' data-angle='90'

  • class='arrow-danger-large' data-angle='180'

  • class='arrow-danger-large' data-angle='270'

  • class='arrow-danger-large' data-angle='45'

  • class='arrow-danger-large' data-angle='135'

  • class='arrow-danger-large' data-angle='225'

  • class='arrow-danger-large' data-angle='315'

  • class='arrow-inverse'

  • class='arrow-inverse' data-angle='90'

  • class='arrow-inverse' data-angle='180'

  • class='arrow-inverse' data-angle='270'

  • class='arrow-inverse' data-angle='45'

  • class='arrow-inverse' data-angle='135'

  • class='arrow-inverse' data-angle='225'

  • class='arrow-inverse' data-angle='315'

  • class='arrow-inverse-large'

  • class='arrow-inverse-large' data-angle='90'

  • class='arrow-inverse-large' data-angle='180'

  • class='arrow-inverse-large' data-angle='270'

  • class='arrow-inverse-large' data-angle='45'

  • class='arrow-inverse-large' data-angle='135'

  • class='arrow-inverse-large' data-angle='225'

  • class='arrow-inverse-large' data-angle='315'

Installation and Usage Guide

This guide tells you everything you need to know to install Bootstrap Arrows into your project and get it up and running.

Dependencies

Bootstrap Arrows works in a restricted form independently of any 3rd party code. However, to use the multi-angle feature, jQuery is required.

Although Bootstrap Arrows matches the look and feel of Bootstrap's button colours and style it does not actually have a dependancy on the Bootstrap framework.

Installation

Installing is simple. Place the bootstrap-arrows.js file in the your preferred js directory. Most likely this will be the same directory where you placed the jQuery and Bootstrap JavaScript files. This can be anywhere in your file structure but I recommend placing it in /assets/js.

Next, place the bootstrap-arrows.css file in your CSS folder. This can also be anywhere but I recommend placing it in /assets/css.

And finally put the arrows.png sprite image into your image folder. To save having to update the image reference in the bootstrap-arrows.css file place the image in /assets/img.

Reference the CSS within the <head> of your document, like this <link href='/css/bootstrap-arrows.css' rel='stylesheet' type='text/css' />

Then reference your JavaScript files at the bottom of your document just above the </html> tag. With the jQuery and Bootstrap references already in place, add the reference to the bootstrap-arrows.js like this <script type="text/javascript" src="js/bootstrap-arrows.js"></script> and you're ready to use it.

Usage

Now that all the requirements are in place you're ready to use Bootstrap Arrows.

Draw your first arrow with <span class='arrow'></span>

You should see an arrow like this one:

If you need arrows that point in directons other than up, initialise the bootstrap-arrows.js jQuery plugin, which dynamically adds the CSS3 rotate transform attribute to specified arrows, allowing you to have each arrow point at any angle from 0 to 360 degrees.

Inside the $(function () { and }); tags initialise the plugin with $('.arrow, [class^=arrow-]').bootstrapArrows();.

Now you can point an arrow to any angle by specifying the angle inside the data-angle tag of the element. For instance, <span class='arrow' data-angle='45'></span> will render the default grey arrow pointing to 45 degrees, like this one:

You can also use the larger arrow format: <span class='arrow-large' data-angle='45'></span> which will render an arrow like this one:

Bootstrap supports the same type of formats as Bootstrap Alerts. So you can add -primary, -info, -success, -warning, -danger, and -inverse to any arrow to get different colours.

Using <span class='arrow-primary' data-angle='90'></span> will render a blue arrow like this one:

Colours and sizes can be used in conjunction with each other too, so using <span class='arrow-success-large' data-angle='180'></span> will render a large green arrow like this one:

More Demos

For more demos, see the Multi-Angle Demos and the Demos with Other Colours in the tabs above.

Thanks for trying out Bootstrap Arrows, and if you've any questions, send an email to hello [at] iarfhlaith dot com.

Bootstrap Arrows currently uses Bootstrap 2.1.1. Built for sharing by Iarfhlaith Kelly