BS Buttons
Button Styles
Bootstrap offers a variety of button styles:
------Button mukava -----
To achieve the above button styles, Bootstrap has the following classes:
- .btn
- .btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link
The following example demonstrates the code for the various button styles:
Example
<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>
The button classes can be applied to a <a>, <button>, or <input> element.
Example
<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">
Why do we put a # in the href attribute of the link?
Because we don’t have a page to link it to and don’t want to receive a “404” notice, we use # as the link in our examples. It should be the actual URL to a certain page.
Button Sizes
Bootstrap supports four button sizes:
----- Button mukava ------
The classes defining the various sizes are:
- .btn-lg
- .btn-sm
- .btn-xs
The following example demonstrates the code for several button sizes:
Example
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</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 covers the complete width of its parent element.
----- Button mukava ------
To build a block-level button, add the class.btn-block.
Example
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Active/Disabled Buttons
A button can be made to be active (appear pressed) or disabled (unclickable).
----- Button mukava ------
The class .active causes a button to appear pressed, while the class .disabled makes a button unclickable:
Example
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
