Bootstrap Directional Buttons
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
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
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