Calendar
Update your profile details
My Notes
Update your profile details
  • It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • Contrary to popular belief, Lorem Ipsum is not simply random text.
My Task List
Update your profile details
Buttons
Get started Documentation with Bootstrap
Basic Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Button tags

The .btn classes 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).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Link
Outline button

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.

Button Sizes and Disabled state

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

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

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

Button group

Wrap a series of buttons with .btn in .btn-group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Button toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Button Nesting

Wrap a series of buttons with .btn in .btn-group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.