Bootstrap Buttons & Button Groups
Bootstrap provides different styles of buttons:
- .btn : Standard button.
- .btn-default : Default
- .btn-primary : Provides extra visual weight and identifies the primary action in a set of buttons.
- .btn-success : Indicates a successful or positive action.
- .btn-info : Contextual button for informational alert messages.
- .btn-warning : Indicates caution should be taken with this action.
- .btn-danger : Indicates a dangerous or potentially negative action.
- .btn-link : Indicates a dangerous or potentially negative action.
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Button Size
- .btn-lg : This makes the button size large.
- .btn-md : This makes the button size small.
- .btn-sm : This makes the button size extra small.
- .btn-xs : This creates block level buttons—those that span the full width of a parent.
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Block Level Buttons
A block level button spans the entire width of the parent element.
<button type="button" class="btn btn-primary btn-block">Block Button</button>
Active or Disabled Buttons
The class .active makes a button appear pressed, and the class .disabled makes a button unclickable:
<button type="button" class="btn btn-primary success">Active success</button>
<button type="button" class="btn btn-success disabled">Disabled success</button>
Bootstrap Button Groups
Button groups allow multiple buttons to be stacked together on a single line.
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Click Here</button>
<button type = "button" class = "btn btn-default">Read More</button>
</div>
Button Size
Instead of applying button sizes to every button in a group, use class .btn-group-lg or .btn-group-sm or .btn-group-xs to size all buttons in the group:
<div class = "btn-group .btn-group-lg">
<button type = "button" class = "btn btn-default">Click Here</button>
<button type = "button" class = "btn btn-default">Read More</button>
</div>
Nesting
You can nest button groups within another button group i.e, place a .btn-group within another .btn-group . This is done when you want dropdown menus mixed with a series of buttons.
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Click Here</button>
<button type = "button" class = "btn btn-default">Read More</button>
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>
Vertical Button Groups
To create a vertical button group .btn-group-vertical is use.
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default">Click Here</button>
<button type = "button" class = "btn btn-default">Read More</button>
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown 1</a></li>
<li><a href = "#">Dropdown 2</a></li>
</ul>
</div>
</div>
Justified Button Groups
To span the entire width of the screen, use the .btn-group-justified class
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">HTML</a>
<a href="#" class="btn btn-primary">CSS</a>
<a href="#" class="btn btn-primary">BOOTSTRAP</a>
</div>
