Less Williams

Online

Buttons

  1. Home
  2. UI Elements
  3. Buttons
Basic Bottons
Bootstrap includes several predefined button styles,each serving its own semantic purpose,with a few extras thrown in for more control.
Rounded Bottons
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.
Rounded 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.
Light Bottons
Bootstrap includes several predefined button styles,each serving its own semantic purpose,with a few extras thrown in for more control.
Light Rounded Bottons
Bootstrap includes several predefined button styles,each serving its own semantic purpose,with a few extras thrown in for more control.
Bottons with Icon
Bootstrap includes several predefined button styles,each serving its own semantic purpose,with a few extras thrown in for more control.
Rounded Bottons with Only Icon
Bootstrap includes several predefined button styles,each serving its own semantic purpose,with a few extras thrown in for more control.
Outline Bottons with Icon
Bootstrap includes several predefined button styles,each serving its own semantic purpose,with a few extras thrown in for more control.
Rounded Outline Bottons with Only Icon
Bootstrap includes several predefined button styles,each serving its own semantic purpose,with a few extras thrown in for more control.
Light Bottons with Icon
Bootstrap includes several predefined button styles,each serving its own semantic purpose,with a few extras thrown in for more control.
Light Bottons with Icon
Bootstrap includes several predefined button styles,each serving its own semantic purpose,with a few extras thrown in for more control.
Button Tags
The .btnclasses are designed to be used with the <button>element. However,you can also use these classes on <a>or <input>elements(though some browsers may apply a slightly different rendering).
Link
Sizes Buttons
Fancy larger or smaller buttons? Add .btn-lgor .btn-smfor additional sizes.
Block Buttons
Fancy larger or smaller buttons? Add .btn-lgor .btn-smfor additional sizes.
Active State Button
Buttons will appear pressed(with a darker background,darker border,and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However,you can still force the same active appearance with .active(and include the aria-pressed="true"attribute) should you need to replicate the state programmatically.
Primary linkLink
Disable State Buttons
Make buttons look inactive by adding the disabledboolean attribute to any <button>element.
Toggle State Buttons
Add data-toggle="button"to toggle a button’s activestate. If you’re pre-toggling a button,you must manually add the .activeclass andaria-pressed="true"to the <button>.
Checkbox Button
Bootstrap’s .buttonstyles can be applied to other elements,such as <label>s,to provide checkbox or radio style button toggling. Add data-toggle="buttons"to a .btn-groupcontaining those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggleto style the <input>s within your buttons. Note that you can create single input-powered buttons or groups of them.
Radio Buttons
Bootstrap’s .buttonstyles can be applied to other elements,such as <label>s,to provide checkbox or radio style button toggling. Add data-toggle="buttons"to a .btn-groupcontaining those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggleto style the <input>s within your buttons. Note that you can create single input-powered buttons or groups of them.