Bootstrap Buttons

Bootstrap provides built-in seven styles of button classes. A styled button can be created using any of the classes summarized in the following table. Remember, the button classes can be combined with <a>, <button>, or <link> element:

Syntax

<button type="button" class="btn btn-*">name</button>

Note: The * symbole in above syntax must be replaced with the name of the style e.g. btn-primary

<button type="button" class="btn btn-primary">Primary</button>

Bootstrap Buttons Example

The following example shows the different button styles:

<div class="container">
     <div class="page-header">
     <h1>Bootstrap Buttons Styles</h1>
    <div class="bootstrap-demo">
    <!-- Standard Button -->
    <button type="button" class="btn btn-default">Default</button>
    <!-- Primary Button -->
    <button type="button" class="btn btn-primary">Primary</button>
    <!-- Successful Button -->
    <button type="button" class="btn btn-success">Success</button>
    <!-- Informational Button -->
    <button type="button" class="btn btn-info">Info</button>
    <!-- Warning Button -->
    <button type="button" class="btn btn-warning">Warning</button>
    <!-- Danger Button -->
    <button type="button" class="btn btn-danger">Danger</button>
    <!-- Link Button -->
    <button type="button" class="btn btn-link">Link</button></div>
    </div>
  </div>

See Live Example

The above Glyphicon example will produce below output:

Bootstrap Buttons Example for Different Elements

The button class used in different elements:

<div class="container">
     <div class="page-header">
     <h1>Bootstrap Button Styles for Different Enements</h1>
    <div class="bootstrap-demo">
	<button type="button" class="btn btn-primary">Button</button>
	<a href="#" class="btn btn-info" role="button">Link Button</a>
	<input type="button" class="btn btn-info" value="Input Button">
	<input type="submit" class="btn btn-success" value="Submit Button">
    </div>
</div>

See Live Example

The above Glyphicon example will produce below output:

Bootstrap Button Sizes

A styled buttons can be created with classes to get buttons of various sizes, summarized in the following table.

Class Name	Descriptions
.btn-lg	Create large size button.
.btn-md	Create medium size button.
.btn-sm	Create small size button.
.btn-xs	Create extra small size button.

Syntax

<button type="button" class="btn btn-default btn-lg">Large Button</button>

Bootstrap Button Sizes Example

The following example code demonstrate different button sizes.

<div class="container">
     <div class="page-header">
     <h1>Bootstrap Buttons Different Sizes</h1>
    <div class="bootstrap-demo">
	<p> <!-- large Button -->
    <button type="button" class="btn btn-default btn-lg">Large Button</button>
    <button type="button" class="btn btn-info btn-lg">Large button</button>
  </p>

  <p><!-- medium Button -->
    <button type="button" class="btn btn-primary">Medium Button</button>
    <button type="button" class="btn btn-default">Medium Button</button>
  </p>

  <p><!-- small Button -->
    <button type="button" class="btn btn-default btn-sm">Small Button</button>
    <button type="button" class="btn btn-warning btn-sm">Small Button</button>
  </p>
  <p><!-- extra small Button -->
        <button type="button" class="btn btn-success btn-xs">Extra Small Button</button>
    <button type="button" class="btn btn-default btn-xs">Extra Small Button</button>
  </p>
    </div>
  </div>

See Live Example

The above Bootstrap button size example will produce below output:

Bootstrap Block Level Buttons

Block level buttons covers the entire width of the parent element.

Class Name	Descriptions
.btn-block	Create block size button.

Syntax

<button type="button" class="btn btn-primary btn-lg btn-block">Block Button</button>

Bootstrap Block Level Button Example

The following example code demonstrate block size button.

<div class="container">
 <div class="page-header">
 <h1>Bootstrap Block Level Button</h1>
<div class="bootstrap-demo">
<!-- class btn-block to create a block button-->
<button type="button" class="btn btn-primary btn-lg btn-block">Primary Block Button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Default Block Button</button>
  <button type="button" class="btn btn-info btn-lg btn-block">Info Block Button</button>
</div>
</div>

See Live Example

The above Bootstrap button size example will produce below output:

Bootstrap Active/Disabled Buttons

Bootstrap button can be set as active or disabled.

Class Name	Descriptions
.active	Make button active.
.disabled	Make button inactive.

Syntax

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

Bootstrap Active/Disabled Buttons Example

The following example code demonstrate active/disabled buttons.

<div class="container">
 <div class="page-header">
 <h1>Bootstrap Active/Disabled Buttons</h1>
<div class="bootstrap-demo">
<!-- class active or  to disabled create a button-->
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
</div>
</div>

See Live Example

The above Bootstrap button size example will produce below output:

« Previous