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>
Try Now

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>
Try Now

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 NameDescriptions
.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>
Try Now

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 NameDescriptions
.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>
Try Now

The above Bootstrap button size example will produce below output:

Bootstrap Active/Disabled Buttons

Bootstrap button can be set as active or disabled.

Class NameDescriptions
.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>
Try Now

The above Bootstrap button size example will produce below output:


See Also

AngularJS Built-in Filters
AngularJS Built-in Directives
AngularJS Expression
AngularJS Built-in Events
AngularJS Scope Methods
AngularJS Built-in Services
AngularJS Controller Inheritance
AngularJS Custom Directives



 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.