Designing Buttons in Bootstrap

You will often need to add a button to a webpage. This could be for a form, or part of an interface where you are wanting to create a special link to a page.

Generally you can use the button tag, although you can also use a anchor tag.

You will want to add some classes to your button(s). .btn to define it as a button, then also one or more classes to further define the button. Primarily, these classes will control:

• color,
• size,
• block (vs. inline by default),
• active, and
• disabled.

NOTE: Bootstrap highly recommends using the button element for buttons, as they work best for cross browser compatibility.

Basic Button

Default

Other colors are:

• btn-default
• btn-primary
• btn-success
• btn-warning
• btn-danger
• btn-info

Button Sizes

Buttons sizes can be .btn-lg (large), .btn-sm (small), and .btn-xs (extra small). If a sizing class is not specified, it is considered to be a normal size, which is between large and small.

Large Button
Normal Button
Small Button
Extra Small Button

Button State

Buttons can be either be in a normal state, an active state, or a disabled state.

Normally a button, when pressed, enters an active state. This is controlled via a :active in the CSS. However, we can force it, by adding an .active class, as it is defined that way in Bootstrap.

Normal Button
Active Button
Disabled Button

Note: It is not CSS that disabled the button. It is a disabled attribute of the button itself.

Watch on YouTube

Designing Buttons in Bootstrap was originally found on Access 2 Learn