Bootstrap Buttons
This chapter will explain how to use Bootstrap buttons through examples. Any element with the class .btn will inherit the default appearance of a rounded-corner gray button. However, Bootstrap provides several options to define button styles, as shown in the table below:
The following styles can be applied to <a>, <button>, or <input> elements:
| Class | Description | Example |
|---|---|---|
| .btn | Adds basic styling to a button | Try it |
| .btn-default | Default/standard button | Try it |
| .btn-primary | Primary button style (unoperated) | Try it |
| .btn-success | Indicates a successful action | Try it |
| .btn-info | This style can be used for buttons that pop up information | Try it |
| .btn-warning | Indicates a button that requires cautious action | Try it |
| .btn-danger | Indicates a dangerous or potentially negative action | Try it |
| .btn-link | Makes the button look like a link (still retains button behavior) | Try it |
| .btn-lg | Makes a large button | Try it |
| .btn-sm | Makes a small button | Try it |
| .btn-xs | Makes an extra small button | Try it |
| .btn-block | Block-level button (stretches to 100% width of parent element) | Try it |
| .active | Button is clicked | Try it |
| .disabled | Disables the button | Try it |
The following example demonstrates all the button classes mentioned above:
Example
<!-- Standard button -->
<button type="button" class="btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger Button</button>
<!-- De-emphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link Button</button>
The result is as follows:
Button Sizes
The table below lists the classes to get various sized buttons:
| Class | Description | | .btn-lg | This will make the button look larger. | | .btn-sm | This will make the button look smaller. | | .btn-xs | This will make the button look extra small. | | .btn-block | This will create a block-level button, spanning the full width of its parent element. |
The following example demonstrates all the button classes mentioned above:
Example
<p>
<button type="button" class="btn btn-primary btn-lg">Large Primary Button</button>
<button type="button" class="btn btn-default btn-lg">Large Button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default Size Primary Button</button>
<button type="button" class="btn btn-default">Default Size Button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small Primary Button</button>
<button type="button" class="btn btn-default btn-sm">Small Button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra Small Primary Button</button>
<button type="button" class="btn btn-default btn-xs">Extra Small Button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">Block Level Primary Button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block Level Button</button>
</p>
The result is as follows:
Button States
Bootstrap provides classes for active, disabled, and other button states, which will be explained in detail below.
Active State
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active.
The following table lists the classes to make button and anchor elements active:
| Element | Class |
|---|---|
| Button Element | Add the .active class to show it as active. |
| Anchor Element | Add the .active class to <a> buttons to show them as active. |
The following example demonstrates this:
Example
<p>
<button type="button" class="btn btn-default btn-lg">Default Button</button>
<button type="button" class="btn btn-default btn-lg active">Active Button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg">Primary Button</button>
<button type="button" class="btn btn-primary btn-lg active">Active Primary Button</button>
</p>
The result is as follows:
Disabled State
When you disable a button, it will fade 50% and lose its gradient.
The following table lists the classes to make button and anchor elements disabled:
| Element | Class |
|---|---|
| Button Element | Add the disabled attribute to <button> buttons. |
| Anchor Element | Add the disabled class to <a> buttons. |
The following example demonstrates this:
Example
<p>
<button type="button" class="btn btn-default btn-lg">Default Button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Disabled Button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg">Primary Button</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Disabled Primary Button</button>
</p>
The result is as follows:
<a href="#" class="btn btn-default btn-lg" role="button">Link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Disabled Link</a>
</p>
<p>
<a href="#" class="btn btn-primary btn-lg" role="button">Primary Link</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Disabled Primary Link</a>
</p>
Result is shown as follows:
Button Tags
You can use button classes on <a>, <button>, or <input> elements. However, it is recommended to use button classes on <button> elements to avoid cross-browser inconsistencies.
The following example demonstrates this:
Example
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
Result is shown as follows:
Button Groups
Directly using .btn-group in a div can create button groups:
Example
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Use .btn-group-lg|sm|xs to control the size of the button group:
Example
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
To set vertical buttons, you can use the .btn-group-vertical class:
Example
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Responsive Button Group
You can set a responsive button group using the .btn-group-justified class.
The following example uses <a> tags to demonstrate:
Example
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Note: If you are using <button> elements, you need to wrap them in a .btn-group class:
Example
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
Button Group with Dropdown Menus
Buttons within a button group can have embedded dropdown menus, as shown in the example below:
Example
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
Split Button
Example
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>