Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Primary Secondary Success Danger Warning Info Light Dark Link
Primary Secondary Success Danger Warning Info Light Dark Link
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the Link 2 class.
The Link 3 classes are designed to be used with the element. However, you can also use these classes on Link 4or Link 4 elements (though some browsers may apply a slightly different rendering).
When using button classes on Link 4elements 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 Link 7 to appropriately convey their purpose to assistive technologies such as screen readers.
Link
Outline buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the Link 9 ones to remove all background images and colors on any button.
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Sizes
Fancy larger or smaller buttons? Add Primary Secondary Success Danger Warning Info Light Dark0 or Primary Secondary Success Danger Warning Info Light Dark1 for additional sizes.
Large button Large button
Small button Small button
Create block level buttons—those that span the full width of a parent—by adding Primary Secondary Success Danger Warning Info Light Dark2.
Block level button Block level button
Block level button Block level button
Active state
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to s as they use a pseudo-class. However, you can still force the same active appearance with Primary Secondary Success Danger Warning Info Light Dark3 (and include the Primary Secondary Success Danger Warning Info Light Dark4 attribute) should you need to replicate the state programmatically.
Primary link Link
Disabled state
Make buttons look inactive by adding the Primary Secondary Success Danger Warning Info Light Dark5 boolean attribute to any
element.Primary Secondary Success Danger Warning Info Light Dark6Disabled buttons using the Link 4element behave a bit different:
- Link 4s don’t support the Primary Secondary Success Danger Warning Info Light Dark5 attribute, so you must add the Large button Large button0 class to make it visually appear disabled.
- Some future-friendly styles are included to disable all Large button Large button1 on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.
- Disabled buttons should include the Large button Large button2 attribute to indicate the state of the element to assistive technologies.
Primary link Link
Link functionality caveat
The Large button Large button0 class uses Large button Large button4 to try to disable the link functionality of Link 4s, but that CSS property is not yet standardized. In addition, even in browsers that do support Large button Large button4, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a Large button Large button7 attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
Button plugin
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Toggle states
Add Large button Large button8 to toggle a button’s Large button Large button9 state. If you’re pre-toggling a button, you must manually add the Primary Secondary Success Danger Warning Info Light Dark3 class and Primary Secondary Success Danger Warning Info Light Dark4 to the .
Small button Small button2Checkbox and radio buttons
Bootstrap’s Small button Small button3 styles can be applied to other elements, such as Link 4s, to provide checkbox or radio style button toggling. Add Small button Small button5 to a Small button Small button6 containing those modified buttons to enable their toggling behavior via JavaScript and add Small button Small button7 to style the Link 4s within your buttons. Note that you can create single input-powered buttons or groups of them.
The checked state for these buttons is only updated via Small button Small button9 event on the button. If you use another method to update the input—e.g., with Link 4 or by manually applying the input’s Block level button Block level button1 property—you’ll need to toggle Primary Secondary Success Danger Warning Info Light Dark3 on the Link 4 manually.
Note that pre-checked buttons require you to manually add the Primary Secondary Success Danger Warning Info Light Dark3 class to the input’s Link 4.