Bootstrap Buttons

The button is used for creating button control which defines clickable action. The buttons are integral part of HTML which selects the elements that are of type button. The Bootstrap provides different types of buttons to specify different states of button. The following are available button classes to style a button in the Bootstrap:

Default: It is default button.

Primary: It defines visual weight and primary action in the set of buttons.

Changing Sizes of Buttons

The Bootstrap provides facility of changing sizes of buttons by using additional classes .btn-lg, .btn-sm and .btn-xs. The following example demonstrates how to define different sizes of buttons on the web page:

The above code uses .btn-lg, .btn-sm and .btn-xs classes to define different sizes of buttons. The .btn-lg class is used to create large size of buttons, the .btn-sm class is used to create small size of buttons and the .btn-xs class is used to create extra small size of buttons on the web page.

Active State

The buttons will be active when they will appear as pressed with darker border and inset shadow. This can be done by using .active on button. We could also use anchor element to show that it is activated. The following is an example:

Disabled State

We can disable the button by using disabled attribute to buttons. When a button is disabled, it appears dimmed and does not respond to user input. To disable button, we write as disabled=”disabled” within the button element. We cannot enter any value in that field. The following is an example:

Button Tags

We can also use button classes with <a>,<button> or <input> elements to use buttons as tags. It is recommended that use it only with <button> element to ensure cross browser rendering. The following is an example:

About Us

Javabeat.net is a blog dedicated to Java/J2EE developers. This site focus on beginners and advanced developers. We constantly write fresh content on J2EE topics like Spring, Hibernate and wide variety of J2EE frameworks.