Post
Ask Question

Bootstrap For Beginners - Part Four (Bootstrap Buttons)

I have started an article series on Bootstrap and published three articles so far. Read the previous three parts here.
In this article we will learn how to create and modify buttons using Bootstrap Buttons Classes.

Bootstrap Buttons

Buttons play various role 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 look like a link with maintaining button behavior
Example 1: 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.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part4</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9.   
  10. <body>  
  11.     <div class="container">  
  12.         <h1>Button Styles</h1>  
  13.         <!--Button Style1:Default--><button type="button" class="btn btn-default">Default Button</button>  
  14.         <!--Button Style2:Primary--><button type="button" class="btn btn-primary">Primary Button</button>  
  15.         <!--Button Style3:Info--><button type="button" class="btn btn-info">Info Button</button>  
  16.         <!--Button Style4:Success--><button type="button" class="btn btn-success">Success Button</button>  
  17.         <!--Button Style5:Danger--><button type="button" class="btn btn-danger">Danger Button</button>  
  18.         <!--Button Style6:Warning--><button type="button" class="btn btn-warning">Warning Button</button>  
  19.         <!--Button Style7:Link--><button type="button" class="btn btn-link">Link Button</button> </div>  
  20.     <script src="js/jquery-2.1.4.min.js"></script>  
  21.     <script src="js/bootstrap.min.js"></script>  
  22. </body>  
  23.   
  24. </html>

Output



Example 2: Button classes used on <a> and <input> tag.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part4</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9.   
  10. <body>  
  11.     <div class="container">  
  12.         <h1>Button With Tags</h1> <a href="#" class="btn btn-primary" role="button">Link Button</a> <input type="button" class="btn btn-info" value="Input Button" /> <input type="submit" class="btn btn-success" value="Submit Button" /> <input type="reset" class="btn btn-danger" value="Reset Button" /> </div>  
  13.     <script src="js/jquery-2.1.4.min.js"></script>  
  14.     <script src="js/bootstrap.min.js"></script>  
  15. </body>  
  16.   
  17. </html>  
Output



Button Sizes

We can make buttons larger or smaller by using Bootstrap classes.

The classes that define the different sizes are:
  • .btn-lg : Used for makes the button size large.
  • .btn-md: Used for makes the button size medium.
  • .btn-sm: Used for makes the button size small.
  • .btn-xs: Used for makes the button size extra small.
Example 3: Button Sizes

In this example we will create buttons and by using above classes we will apply size on buttons by writing the following code.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part4</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9.   
  10. <body>  
  11.     <div class="container">  
  12.         <h1>Bootstrap Button Size</h1>  
  13.         <!--Button Size1:Large--><button type="button" class="btn btn-danger btn-lg">Large Button</button>  
  14.         <!--Button Size2:Medium--><button type="button" class="btn btn-danger btn-md">Medium Button</button>  
  15.         <!--Button Style3:Small--><button type="button" class="btn btn-danger btn-sm">Small Button</button>  
  16.         <!--Button Style4:XSmall--><button type="button" class="btn btn-danger btn-xs">Extra Small Button</button> </div>  
  17.     <script src="js/jquery-2.1.4.min.js"></script>  
  18.     <script src="js/bootstrap.min.js"></script>  
  19. </body>  
  20.   
  21. </html>  
Output



Block Level Buttons

We can create block level buttons that span the full width of the parent elements by using class .btn-block.

Example 4: Block Level Buttons

In this example we will create buttons using .btn-block class by writing the following code.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part4</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9.   
  10. <body>  
  11.     <div class="container">  
  12.         <h1>Bootstrap Block Level Buttons</h1>  
  13.         <!--Button:Block Level Button Primary--><button type="button" class="btn btn-primary btn-block">Block Level Button</button>  
  14.         <!--Button:Block Level Button Large--><button type="button" class="btn btn-warning btn-lg btn-block">Block Level Button Large</button>  
  15.         <!--Button:Block Level Button Default --><button type="button" class="btn btn-default btn-block">Block Level Button Default</button> </div>  
  16.     <script src="js/jquery-2.1.4.min.js"></script>  
  17.     <script src="js/bootstrap.min.js"></script>  
  18. </body>  
  19.   
  20. </html>  
Output



Button State(Active and Disabled Buttons)

Bootstrap provides classes which are used to change the state of buttons.
  • .active class: A button can be set to an active like pressed using .active class or
  • .disabled class: A button can be disabled like unclickable state using .disabled class and it will fade in color. For <a> tag this class only change the appearance, not its functionality, and we need to use JavaScript to disable links.
Example 5 : Active and Disabled Buttons

In this example we will create buttons and apply state of buttons Active and Disabled by writing the following code.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part4</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  9.   
  10. <body>  
  11.     <div class="container">  
  12.         <h2>Button State:Active and Disabled</h2>  
  13.         <!--Button State: Active Button Primary--><button type="button" class="btn btn-primary active">Active Button</button>  
  14.         <!--Button State: Disabled Button Primary--><button type="button" class="btn btn-primary disabled">Disabled Button</button>  
  15.         <h2>Button State:Active and Disabled On Anchor Element</h2>  
  16.         <!--Button State: Active On Anchor Element--><a href="#" class="btn btn-primary active" role="button">Active Link Button</a>  
  17.         <!--Button State: Disabled On Anchor Element--><a href="#" class="btn btn-primary Disabled" role="button">Disabled Link Button</a> </div>  
  18.     <script src="js/jquery-2.1.4.min.js"></script>  
  19.     <script src="js/bootstrap.min.js"></script>  
  20. </body>  
  21.   
  22. </html>  
Output



In this article we focused on Bootstrap Buttons. In the next article we will understand all the components of Bootstrap step by step.
 
Read more articles on Bootstrap: 


Similar Articles