Buttons
Basic Buttons
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Outline Buttons
In need of a button, but not the hefty background colors they bring? Replace the
default modifier
classes with the .btn-outline-*
ones to
remove all background
images and colors on any button.
Sizing Buttons
Brand Buttons
Google and Facebook buttons are available featuring each company's respective brand color. They are used on the user login and registration pages.
You can create more custom buttons by adding a new color variable in the
_variables.scss
file and then using the Bootstrap button variant mixin to create a new
style, as demonstrated in the _buttons.scss
file.
Split Buttons with Icon
Works with any button colors, just use the .btn-icon-split
class and
the markup in the
examples below. The examples below also use the .text-white-50
helper class on the
icons for additional styling, but it is not required.
Also works with small and large button classes!
Split Button Small Split Button LargeDisabled Buttons
Make buttons look inactive by adding the disabled
boolean
attribute to any <button>
element.
For more documentations you can visit bootstrap buttons documentations.