Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Bootstrap

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.

Up Next
    Ebook Download
    View all
    Learn
    View all