Buttons play various roles in websites and applications and are used to submit, reset, show and hide on click of button, link button etc.
By using Bootstrap we can easily create and customize the buttons.
Bootstrap Button Styles
In Bootstrap different classes are used for styling the buttons and styles can be applied to any element like <a>, <button> and <input>.
Bootstrap provides seven styles of buttons,
To apply the button styles, Bootstrap provides the following classes,
- .btn-default - Default gray color Standard button
- .btn-primary - To indicate primary action button
- .btn-info - Used for informational alert messages
- .btn-success - Indicates a successful or positive action
- .btn-danger - Indicates a dangerous or negative action.
- .btn-warning - Indicates caution should be taken with this action
- .btn-link - Button looks like a link while maintaining button behavior
Example
Bootstrap Button Styles,
In this example we will create buttons and by using above classes we will apply styles on buttons through the following code.
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="utf-8">
- <title>Bootstrap Part4</title>
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
-
- <body>
- <div class="container">
- <h1>Button Styles</h1>
- <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-info">Info Button</button>
- <button type="button" class="btn btn-success">Success Button</button>
- <button type="button" class="btn btn-danger">Danger Button</button>
- <button type="button" class="btn btn-warning">Warning Button</button>
- <button type="button" class="btn btn-link">Link Button</button> </div>
- <script src="js/jquery-2.1.4.min.js"></script>
- <script src="js/bootstrap.min.js"></script>
- </body>
-
- </html>
Output
