Directional / Arrow buttons for Bootstrap

  • By Weston Ganger
  • Last update: Aug 3, 2022
  • Comments: 1

Bootstrap Directional Buttons

Gem Version NPM Downloads Buy Me a Coffee

Directional / Arrow buttons for Bootstrap

Usage:

Just add class .btn-arrow-left or .btn-arrow-right to bootstrap buttons. Use inside a .btn-group to remove space between button.

<button type="button" class="btn btn-primary btn-arrow-left">Left Arrow Button</button>
<button type="button" class="btn btn-success btn-arrow-right">Right Arrow Button</button>

Demo:

https://jsbin.com/soweca/edit?html,css,output

Preview

Install

Yarn, NPM, Bower

yarn add bootstrap-directional-buttons

npm install bootstrap-directional-buttons

bower install bootstrap-directional-buttons

Rails

# Gemfile
source 'https://rails-assets.org' do
  gem 'rails-assets-bootstrap-directional-buttons'
end


# app/assets/stylesheets/application.scss
/*
 *= require bootstrap-directional-buttons
*/

Credits

Enhanced and Updated by Weston Ganger - @westonganger

Created by Leonid Komarovsky - @shpoont

Github

https://github.com/westonganger/bootstrap-directional-buttons

Comments(1)

  • 1

    Space between buttons with Bootstrap 4

    There is a small space between the buttons that I can't seem to fix. I have tried many combinations of css but they either result in still having the space, exposing the :after :before elements as a square, or removing the arrow completely.

    https://codepen.io/anon/pen/geJqLm

    image