Bootstrap Home
Getting Started
File Structure
BOOTSTRAP CSS
Grid System
Bootstrap Typography
Bootstrap Code
Bootstrap Table
Bootstrap Forms
Bootstrap Input
Bootstrap Button
Bootstrap Images
COMPONENTS
Bootstrap Glyphicons
BS Glyphicon List
Bootstrap Alert
Bootstrap Badges
Bootstrap Breadcrumb
Bootstrap Cards
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.
<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
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.
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>
Warning Button
<button type="button" class="btn btn-warning">Warning Button</button>
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>
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:
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
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>
