Create custom button styles(multiple sizes, states, and more) using bootstrap.

How to use

Add .btn class and any of the predefined button styles to the <button> element.

Adding predefined background color

Add any below classes to color your button as needed.

  • .btn-primary
  • .btn-secondary
  • .btn-success
  • .btn-danger
  • .btn-warning
  • .btn-info
  • .btn-light
  • .btn-dark
Note Accessibility

Using color only provides a visual indication. To support users of assistive technologies such as screen readers include additional text hidden with the .sr-only class.

Button tags

You can also use .btn classes on <a> or <input> elements.


When using button classes on <a> elements for triggering functionality like collapsing content etc., instead of linking purpose, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Outline buttons

Add .btn-outline-* classes to create outline colored button which remove all background images and colors on any button.


Add .btn-lg for large buttons or .btn-sm for small buttons or .btn-block for block level buttons which fill the width of the parent element.

Large Button
Small Button
Block Level Button

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Active state

When active buttons will appear pressed (with a darker background, darker border, and inset shadow). <button>s use a pseudo-class sohere's no need to add a class. You can also force the same active appearance with .active and programmatically include the aria-pressed="true" attribute to indicate the state of the element to assistive technologies.

Disabled state

Add disabled boolean attribute to any <button> element to make buttons look inactive.

Disabled buttons using the <a> element

  • <a>s don't support the disabled attribute, so add the .disabled class to make it visually appear disabled.
  • Include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.

The .disabled class uses pointer-events: none to disable the link functionality of <a>s, but that CSS property is not yet standardized. Users of assistive technologies will still be able to activate these links. To be safer use code>tabindex="-1" attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.

Button toolbar

Create groups of buttons for more components like toolbars.

Toggle states

Add data-toggle="button" to toggle a button's active state. For pre-toggling a button, manually add the .active class and aria-pressed="true" to the <button>.

Checkbox and radio buttons

You can apply button styles to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group to enable toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s within your buttons. You can create single input buttons or groups of them.

The checked state for these buttons is only updated via click event on the button. Add .active on the <label> when you manually apply input's checked property or when using <input type="reset">.


Note that pre-checked buttons you need to manually add the .active class to the input's <label>.

Method Description
$().button('toggle') Toggles push state. Gives the button the appearance that it has been activated.
$().button('dispose') Destroys an element's button.
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +