Buttons

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

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

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

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

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.

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

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.

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.

Create groups of buttons for more components like toolbars.

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>.

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">.