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
Class Description
Btn Default/ 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-info Contextual button for informational alert messages.
btn-warning Indicates caution should be taken with this action.
btn-danger Indicates a dangerous or potentially negative action.
btn-link Deemphasize 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

Class Description
.btn-lg This makes the button size large.
.btn-sm This makes the button size small.
.btn-xs This makes the button size extra small.
.btn-block This 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.
Element Class
Button element Use .active class to show that it is activated.
Anchor element Use .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.
Element Class
Button element Add the disabled attribute to <button> buttons.
Anchor element Add 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