Search within TutorialsPark

Twitter Bootstrap Buttons


To Create styled Buttons of Various sizes and colors


Twitter Bootstrap: Button Options

1. A styled button can be created using any of the classes.

Here, the class .btn-default denotes a default button.

class .btn-primary denotes a primary button.

class .btn-success denotes a successful or positive action.

class .btn-info is used for informational or alert contents.

class .btn-warning is used to denote caution.

class .btn-danger to indicate a dangerous or some potentially negative action.

class .btn-link is used to make a button look like a link while behaving like a button.

Example: Twitter Bootstrap Basic Forms

Give it a TRY! »

Twitter Bootstrap: Button Sizes

1. Buttons of various sizes can be created using button classes

2. Here, class .btn-lg is used for a large button

class .btn-sm is used for a small button

and class .btn-xs is used for an extra small button

Example:Twitter Bootstrap Button Sizes

Give it a TRY! »

Twitter Bootstrap: Block Level Buttons

1. Block level buttons span the entire width of the parent element, add class .btn-block to create one.

Example:Twitter Bootstrap Block Level Buttons

Give it a TRY! »

Twitter Bootstrap: Button Element with Active and Disabled State

1. Buttons in active state appeares pressed , for <button> element it is achieved using pseudo class :active.

2. For element <a> it is achieved using .active

3. But you can even use .active on <button> if you need to replicate the active state.

Example:Twitter Bootstrap Active and Disabled states on Button Element

Give it a TRY! »

Twitter Bootstrap: Anchor Element with Active and Disabled States

1. Activated anchor element can be created by using class .active within a <a> element

2. To create a disabled button, making it look faded by 50% use attribute disabled within <button>

Example:Twitter Bootstrap Active and Disabled States on Anchor Elements

Give it a TRY! »

Twitter Bootstrap: Buttons using Various Methods

1.Buttons can be created in multiple ways by using button classes on <a> , <button> or <input>.

Example:Twitter Bootstrap Buttons using Various Methods

Give it a TRY! »