Bootstrap Buttons v11 Sizes and Colors Explained

Updated 5 November 2026 · Standard formula, shown below

Bootstrap 5.3.8, the latest Bootstrap 5 release as of November 2026, includes six standard button color variants—primary, secondary, success, danger, warning, and info—plus light and dark variants, and two built-in size modifiers: large and small. The default button size is the regular size; there is no separate extra-small or extra-large button class in the standard set.

What “Bootstrap buttons v11” means

Bootstrap does not have a version called “v11.” Its version numbering uses major releases such as Bootstrap 4 and Bootstrap 5, and its current documented button classes are from Bootstrap 5. The wording “Bootstrap buttons v11” may refer to a project, theme, or package that labels its own release v11, rather than to Bootstrap itself. Check the dependency or project documentation if you need to identify that product precisely.

The button class names discussed here are the standard Bootstrap 5 pattern. They apply when the project actually loads Bootstrap’s CSS; a theme or custom stylesheet can change how the buttons look. The practical answer is therefore about Bootstrap’s built-in options, not a guarantee that every site labeled “v11” uses them unchanged.

Built-in button colors

Bootstrap’s contextual button variants communicate common interface roles. Use the matching class alongside .btn:

.btn-primary for the main action or strongest visual emphasis.
.btn-secondary for a less prominent action.
.btn-success for a successful or positive action.
.btn-danger for destructive or potentially harmful actions.
.btn-warning for caution or an action needing attention.
.btn-info for informational actions.
.btn-light and .btn-dark for light and dark neutral treatments.

There are also outline variants: .btn-outline-primary, .btn-outline-secondary, and the equivalent .btn-outline- classes for success, danger, warning, info, light, and dark. These use a border and colored text rather than a solid background in the default state. Hover, focus, and active states can change their appearance.

Color names describe design roles, not fixed meanings that users will automatically understand. A red danger button is not a substitute for a clear label such as “Delete account.” Likewise, do not rely on color alone to communicate status; text and accessible labels should make the action understandable.

Button sizes and default dimensions

Bootstrap supplies two size modifiers for buttons: .btn-lg for large and .btn-sm for small. The regular button is the default when neither modifier is present. These classes adjust padding and font size; they are not fixed width or height settings. The rendered dimensions can also depend on the font, browser, and surrounding CSS.

For example, a regular primary button is written as <button type="button" class="btn btn-primary">Save</button>. Add btn-lg or btn-sm to the same class list to change its size. You can combine a size with any color variant, including an outline variant:

class="btn btn-success btn-lg" makes a large success button.
class="btn btn-outline-danger btn-sm" makes a small outline danger button.
class="btn btn-secondary" keeps the default, regular size.

Bootstrap does not provide a dedicated extra-small or extra-large button size class. If a design requires a custom size, add a project-specific CSS rule rather than assuming that familiar classes such as .btn-xl or .btn-xs are part of the standard button component.

How to apply the classes

A Bootstrap button uses the base .btn class plus one color or outline variant. A size modifier is optional. The same styling can be applied to supported button-like elements, including links, when used appropriately.

<button type="button" class="btn btn-primary">Continue</button>
<button type="button" class="btn btn-outline-secondary btn-sm">Cancel</button>
<a class="btn btn-success btn-lg" href="/confirm">Confirm</a>

For an actual form submission, choose the appropriate button type, such as submit, instead of copying type="button" blindly. A button with type button does not submit its form by default. A link styled with .btn remains a link, so use a real destination and do not use a link merely to trigger an action that should be a button.

Choosing a color and size

Choose the variant according to the action’s importance and consequence, not just to decorate a page. Keep a consistent visual hierarchy: reserve the primary style for the principal action, and use secondary or outline styles for alternatives. Make destructive actions explicit and consider separating them from routine actions so users are less likely to select them accidentally.

Size should reflect the interface and the target audience. Large buttons can help emphasize a key action, while small buttons may fit compact toolbars. However, the size class alone does not ensure that a control is easy to use: check the rendered target, spacing, and text at the actual viewport sizes your interface supports. Avoid shrinking important controls just to fit too many actions on one line.

For brand-specific colors or a custom palette, use Bootstrap’s theming and Sass customization options or add carefully scoped CSS. Avoid defining a global button rule that unintentionally changes every variant. Also verify contrast for normal, hover, focus, and disabled states; a color that looks clear on a large solid button may be difficult to read in an outline treatment.

Common issues and version checks

If a button appears unstyled, confirm that the page loads Bootstrap’s CSS and that the class names match the version in use. A frequent mistake is writing only btn-primary without the required btn base class. Another is expecting a class from a custom theme or an older project to exist in standard Bootstrap.

To check what “v11” means in a particular project, inspect its package manifest, lockfile, stylesheet link, or documentation. The project may be on Bootstrap 5 while the application or theme itself is at version 11. If the styles differ from the examples, search the project for overrides and confirm which CSS file loads last; later rules can replace Bootstrap’s defaults.

Bootstrap’s default palette and component styling can vary between major releases and can be customized. Treat the class names as the supported interface and consult the documentation for the exact Bootstrap version installed, especially before relying on pixel measurements or color values.

Frequently Asked Questions

How many colors do Bootstrap buttons have?
Bootstrap 5 provides eight standard color variants: primary, secondary, success, danger, warning, info, light, and dark. Each also has an outline counterpart.

What are the Bootstrap button size classes?
Use .btn-lg for large and .btn-sm for small. With neither class, the button uses the default regular size.

Does Bootstrap have a btn-xl or btn-xs class?
Those are not standard Bootstrap 5 button size classes. Create a custom style if your project needs another size.

Is Bootstrap v11 a real Bootstrap version?
No. Bootstrap’s version numbering does not identify a release as v11. That label may belong to an application, theme, or package that uses Bootstrap.

Can I combine a button color and size?
Yes. Add the base .btn, one color or outline variant, and an optional size class to the same element.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.