Post
Ask Question

Working With Bootstrap Buttons And Badges

Button style

Bootstrap provides different styles of buttons - Basic, Default, Success, Info, Warning, Danger, Link.

Bootstrap button classes

There are seven types of bootstrap button classes, as given below.

  • .btn
  • .btn-default
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link
ClassDescription
BtnDefault/ Standard button.
btn-primary Provides extra visual weight and identifies the primary action in a set of buttons.

btn-success

Indicates a successful or positive action.

btn-infoContextual button for informational alert messages.
btn-warningIndicates caution should be taken with this action.
btn-dangerIndicates a dangerous or potentially negative action.
btn-linkDeemphasize a button by making it look like a link while maintaining button behavior.

The Button Classes can be used on

These three tags can use button classes to create buttons.

  • <a>
  • <button>
  • <input>

Using different button classes program 

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Bootstrap Installation</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initialscale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" </head>  
  9.   
  10.     <body>  
  11.         <div class="container">  
  12.             <div class="row well">  
  13.                 <h1 class="text-center page-header text-primary">Bootstrap Button</h1> <a href="#" class="btn">Basic</a> <a href="#" class="btn btn-default">Default</a> <a href="#" class="btn btn-primary">Primary</a> <button type="button" class="btn btn-warning">Warning</a>  
  14.   
  15. <button type="button” class="btn btn-info">Info </a>  
  16.   
  17. < button type="button" class="btn btn-success">Success</a>  
  18.   
  19. <input type="submit" class="btn btn-danger">Danger </a>  
  20.   
  21. <input type="submit" class="btn btn-link">Link </a>  
  22.   
  23. </div>  
  24.   
  25. </div>  
  26.   
  27. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  28.   
  29. <script type="text/css" src="js/jquery"></script>  
  30.   
  31. </body>  
  32.   
  33. </html>  

Output

Bootstrap

Button Size

Bootstrap provides buttons in four sizes  - Large, medium, small, extrasmall.

We can define the different sizes as

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs

ClassDescription
.btn-lgThis makes the button size large.
.btn-smThis makes the button size small.
.btn-xsThis makes the button size extra small.
.btn-blockThis creates block level buttons—those that span the full width of a parent.

Different button sizes program

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  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.             <div class="row well">  
  13.                 <h1 class="text-center page-header text-danger">Different Button size</h1> <button class="btn btn-lg btn-success">click here</button> <button class="btn btn-md btn-danger">click here</button> <button class="btn btn-sm btn-info">click here</button> <button class="btn btn-xs btn-warning">click here</button> </div>  
  14.         </div>  
  15.         <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  16.         <script type="text/css" src="js/jquery"></script>  
  17.     </body>  
  18.   
  19. </html>  

Output

Bootstrap

Active/Disabled Buttons

Active State
  • A button can be set to active (appear pressed and pressable) and disabled (unclickable) state.
  • Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active.
  • The .active class is used to show that we can press the button.
ElementClass
Button elementUse .active class to show that it is activated.
Anchor elementUse .active class to <a> buttons to show that it is activated.

Disabled

  • Disable button makes unclickable movement.
  • When you disable a button, it gets fade in color by 50%, and loses the gradient.
ElementClass
Button elementAdd the disabled attribute to <button> buttons.
Anchor elementAdd the disabled class to <a> buttons.

Program for making buttons Active/Disabled

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  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.             <div class="row well">  
  13.                 <h1 class="text-center page-header text-danger">Different Button size</h1> <button class="btn btn-success active">click here</button> <button class="btn btn-success disabled">click here</button> </div>  
  14.         </div>  
  15.         <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  16.         <script type="text/css" src="js/jquery"></script>  
  17.     </body>  
  18.   
  19. </html>  

Output 1

Bootstrap

Example 2

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  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.         <p> <button type="button" class="btn btn-default btn-lg">  
  12.   
  13. Default Button  
  14.   
  15. </button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">  
  16.   
  17. Disabled Button</button> </p>  
  18.         <p> <button type="button" class="btn btn-success btn-lg">  
  19.   
  20. Active button </button> <button type="button" class="btn btn-success btn-lg" disabled="disabled">  
  21.   
  22. Disabled Primary button</button> </p>  
  23.         <p> <a href="#" class="btn btn-info btn-lg" role="button">  
  24.   
  25. Active Link </a> <a href="#" class="btn btn-info btn-lg disabled" role="button">  
  26.   
  27. Disabled Link</a> </p>  
  28.         <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  29.         <script type="text/css" src="js/jquery"></script>  
  30.     </body>  
  31.   
  32. </html>  
  33. </p>  

Output 2

Bootstrap

  • The first button is active and the second button is disabled.

Block Level Buttons

  • A block level button spans the entire width of the parent element.
  • We can create a block level button using the following class. 

    .btn-block

Program for Block Level Buttons

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  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.         <div class="row well col-md-12">  
  13.             <h1 class="text-center page-header text-danger">button block</h1> <button class="btn btn-success btn-block">click here</button> </div>  
  14.     </div>  
  15.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  16.     <script type="text/css" src="js/jquery"></script>  
  17. </body>  
  18.   
  19. </html>  

Output

Bootstrap

Button Group

  • We learned how to create ordinary buttons in the previous programs. Now, let's learn how to create the button group.
  • Button group means removing the space between two buttons and group them together.

Badge

  • Badge is used to highlight the information in a circle.

Button Group & Badge Example program

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Button size</title>  
  6.     <meta charset="utf-8">  
  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.             <div class="jumbotron text-center">  
  13.                 <h3 class="text-info">Bootstrap Button, Button group & Badges</h3>  
  14.             </div>  
  15.             <div class="container">  
  16.                 <div class="jumbotron">  
  17.                     </h4><b>Before grouping the button</b></h4><br><br> <button class="btn btn-default">Button1</button> <button class="btn btn-default">Button2</button> <br> <br> </h4><b>Before grouping the button</b></h4> <br> <br>  
  18.                     <div class="btn-group"> <button class="btn btn-info">Button1</button> <button class="btn btn-info">Button2</button> <button class="btn btn-info">Button3</button> </div> <br> <br> </h4><b>Grouping the Large size button</b></h4> <br> <br>  
  19.                     <div class="btn-group btn-group-lg"> <button class="btn btn-success">Button lg</button> <button class="btn btn-success">Button lg</button> <button class="btn btn-success">Button lg</button> </div> <br> <br> <br> </h4><b>Grouping the vertical button</b></h4> <br>  
  20.                     <div class="btn-group btn-group-vertical"> <button class="btn btn-primary">Button lg</button> <button class="btn btn-primary">Button lg</button> <button class="btn btn-primary">Button lg</button> </div> <br> <br> </h4><b>Badges</b></h4> <br> <br> <a href="#">How many States in India <span class="badge">29</span><a>  
  21.   
  22. <br>  
  23.   
  24. <br>  
  25.   
  26. <a href="#">How many territories in India<span class="badge">7</spa<a>  
  27.   
  28. </div>  
  29.   
  30. </div>  
  31.   
  32. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  33.   
  34. <script type="text/css" src="js/jquery"></script>  
  35.   
  36. </body>  
  37.   
  38. </html>  

Output

Bootstrap

Conclusion

I hope now you understand how to create Bootstrap Button, Button group, and Badge. In future articles, we will learn more Bootstrap techniques step by step. Stay tuned.

Similar Articles