• Problems

  This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

This chapter will discuss about how to use Bootstrap button with examples.
Anything that is given a class of .btn will inherit the default look of a gray button with rounded corners.
However Bootstrap provides some options to style buttons, which are summarized in the following table:


Providing detail about the button:

1) btn-primary Provides extra visual weight and identifies the primary action in a set of buttons.
2) btn-success Indicates a successful or positive action.
3) btn-info Contextual button for informational alert messages.
4) btn-warning Indicates caution should be taken with this action.
5) btn-danger Indicates a dangerous or potentially negative action.
6) btn-link Deemphasize a button by making it look like a link while maintaining button behavior.


 Following example demonstrates all the above button classes:
<button type="button" class="btn btn-default">Default Button</button>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-link">Link Button</button>

                             

Providing size for the button:

1).btn-lg This makes button size large.
2).btn-sm This makes button size small.
3).btn-xs This makes button size with extra small.
4).btn-block This creates block level buttons—those that span the full width of a parent.

The following example demonstrates this:
<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>

                          

Providing state for buttom
1)active :ACTIVE STATE Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active.
2)disabled:DISABLED STATE When you disable a button, it will fade in color by 50%, and lose the gradient.


The following example demonstrates this:

<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>
<button type="button" class="btn btn-default btn-lg" disabled="disabled"> Disabled Button </button>
 </p>