saftutorials.com
Bootstrap Button

Bootstrap Button is most important for Bootstrap. It helps to you for easily make varieties button. Bootstrap has many types of button class. Such as default, primary, success, info, warning, link.

Example of Bootstrap Button

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

Output

Link Button


How to use Bootstrap Button?

1) Context-specific usage: Button classes used on <a> and <button> tags, only <button> elements are supported within Bootstrap nav and navbar components.

2) Links acting as buttons: If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

3) Cross-browser rendering: As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering. Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.


Bootstrap Classes

Default Class

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

Output: 


Primary Class

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

Output: 


Success Class

<button type="button" class="btn btn-success">Success Button</button>

Output: 


Info Class

<button type="button" class="btn btn-info">Info Button</button>
Output: 


Warning Button

<button type="button" class="btn btn-warning">Warning Button</button>
Output: 


Danger Button:

<button type="button" class="btn btn-danger">Danger Button</button>

Output: 


Link Button:

<button type="button" class="btn btn-link">Link Button</button>
Output: 


Bootstrap Button Sizes

If you want make larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional class sizes.

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>
<button type="button" class="btn btn-primary btn-lg">Bootstrap Large button</button>
<button type="button" class="btn btn-default btn-lg">Bootstrap Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Bootstrap Default button</button>
<button type="button" class="btn btn-default">Bootstrap Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Bootstrap Small button</button>
<button type="button" class="btn btn-default btn-sm">Bootstrap Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Bootstrap Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Bootstrap Extra small button</button>
</p>
</body>
</html>

Output:


Bootstrap Active Button

If you want to make an active button in Bootstrap then you use an extra class active.

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary Button with Active</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Default Button with Active</a>

Output: 

Primary Button with Active Default Button with Active


Bootstrap Disabled Button

If you want to make a disabled button in Bootstrap then you can use an extra attribute disabled="disabled". When you use attribute disabled="disabled" then the button will change with opacity and mouse pointer.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary Disabled button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Default Disabled Button</button>
Output: 


Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic