Using Bootstrap: Part 3: Buttons

Learning Bootstrap

Using Bootstrap

Bootstrap is a free and open-source front-end framework for designing HTML- and CSS-based applications.


Buttons

In Bootstrap, a button is both the HTML element and those elements with a type attribute set to “button”.

As a component, Buttons also have access to the built-in color classes. However, and similar to Alert, class pairings start with btn and then use the prefix btn- before the built-in color classes.

Sizes

In addition to the built-in color classes, buttons can also be three different sizes: large (btn-lg), small (btn-sm), and block (btn-block).

Buttons that have the btn-block class fill up all available space.

States

Both button HTML elements and those elements using the btn class to replicate the presentation of buttons have two states: active and disabled.

Active

HTML Buttons, by default, are “active.” To create the same effect on elements using the btn class, the class active can be applied. (It is also highly recommend to use the attribute aria-pressed with a value of “true” to help assistive technologies recognize this state.)

Disabled

HTML buttons can be disabled through applying the attribute disabled. For those elements using the btn class, the class disabled can be applied. (Like with the active state, it is also highly recommended to use the attribute aria-disabled with a value of “true” to help assistive technologies recognize this state.)

Play with the example on Repl.it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.