- Alert
- Buttons
- Button group
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Examples
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of
the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.
Badges
Documentation and examples for badges, our small count and labeling component.
Example
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Badges can be used as part of links or buttons to provide a counter.
Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.
Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
Pill badges
Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.
Links
Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples
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.
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.
Sizes
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.
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 <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.
Disabled state
Make buttons look inactive by adding the disabled boolean attribute to any <button> element.
Disabled buttons using the <a> element behave a bit different:
-
<a>s don’t support thedisabledattribute, so you must add the.disabledclass to make it visually appear disabled. - Some future-friendly styles are included to disable all
pointer-eventson anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all. - Disabled buttons should include the
aria-disabled="true"attribute to indicate the state of the element to assistive technologies.
Link functionality caveat
The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that
do support pointer-events: none, 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 tabindex="-1" 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 data-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button>.
Checkbox and radio buttons
Bootstrap’s .button styles 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-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s 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 click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.
Note that pre-checked buttons require you to manually add the .active class to the input’s <label>.
Methods
| Method | Description |
|---|---|
$().button('toggle') |
Toggles push state. Gives the button the appearance that it has been activated. |
$().button('dispose') |
Destroys an element’s button. |
Button group
Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Basic example
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.
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
Sizing
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.
Nesting
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.