Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing buttons in bootstrap .

Objectives and Outcomes

In this, we will discuss about designing of buttons in bootstrap .

Button Styles

Bootstrap provides seven styles of buttons. The following example shows the code for the different button styles:

<h2>Button Styles</h2>
  <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 Styles


The button classes can be used on an <a>, <button>, or <input> element:

<h2>Button Tags</h2>
  <a href="#" class="btn btn-info" role="button">Link Button</a>
  <button type="button" class="btn btn-info">Button</button>
  <input type="button" class="btn btn-info" value="Input Button">
  <input type="submit" class="btn btn-info" value="Submit Button">

Button Tags

Link Button







Button Sizes

The following example shows the code for different button sizes:

<h2>Button Sizes</h2>
  <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>

Button Sizes



Block Level Buttons

A block level button spans the entire width of the parent element. Add class btn-block to create a block level button:

<h2>Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-block">Button 2</button>

Block Level Buttons






Active/Disabled Buttons

A button can be set to an active (appear pressed) or a disabled (unclickable) state: The class active makes a button appear pressed, and the class disabled makes a button unclickable:

<h2>Button States</h2>
  <button type="button" class="btn btn-primary">Primary Button</button>
  <button type="button" class="btn btn-primary active">Active Primary</button>
  <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
  

Button States