Post
Ask Question

Buttons In Bootstrap

Introduction

 
Bootstrap is an open-source web development framework developed by Twitter. It's used to design a responsive web page and design with the help of predefined CSS based templates. Bootstrap provides a typography, forms, buttons, navigations, pagination etc.
 
By using the Bootstrap framework, it's very easy to build a responsive site.
 
In this blog, I explain how to implement a Bootstrap button in a webpage.
 

Bootstrap Buttons

 
Bootstrap buttons templates are
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
I will explain all buttons one by one :)
 
Primary Button
 
Primary buttons are normally displaying in “Blue” which is predefined by Bootstrap. This button is commonly used for website landing page
(Example: signup and login buttons)
 
Code sample
  1. <html>    
  2.     <head>    
  3.         <meta charset="utf-8">    
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
  5.         <title>Csharp corner</title>    
  6.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    
  7.         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    
  8.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>    
  9.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
  10.         </head>    
  11.     <body>    
  12.         <button type="button" class="btn btn-primary"> csharp corner primary button</button>    
  13.     </body>    
  14. </html>    
 
 
Secondary Button
 
Primary buttons are normally displaying in “Grey “which is predefined by Bootstrap.
 
This button is commonly used in webpage forms.
 
Code sample
  1. <html>    
  2.     <head>    
  3.         <meta charset="utf-8">    
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
  5.         <title>Csharp corner secondary</title>    
  6.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    
  7.         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    
  8.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>    
  9.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
  10.         </head>    
  11.     <body>    
  12.         <button type="button" class="btn btn-secondary"> csharp corner Secondary button</button>    
  13.     </body>    
  14. </html>    
 
 
Success Button   
 
Primary buttons are normally displaying in “Green” which is predefined by Bootstrap.
 
This button is commonly used when a registration success message is displayed.
 
Code sample
  1. <html>    
  2.     <head>    
  3.         <meta charset="utf-8">    
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
  5.         <title>Csharp corner Success</title>    
  6.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    
  7.         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    
  8.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>    
  9.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
  10.             
  11.     </head>    
  12.     <body>    
  13.         <button type="button" class="btn btn-success"> csharp corner Success button</button>    
  14.     </body>    
  15. </html>    
 
 
Danger Button
 
Primary buttons are normally displaying in “Red” which ispredefined by Bootstrap. This button is commonly used in websites for some critical actions.
 
Code sample
  1. <html>    
  2.     <head>    
  3.         <meta charset="utf-8">    
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
  5.         <title>Csharp corner Danger</title>    
  6.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    
  7.         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    
  8.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>    
  9.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
  10.             
  11.     </head>    
  12.     <body>    
  13.         <button type="button" class="btn btn-danger"> csharp corner danger button</button>    
  14.     </body>    
  15. </html>   
 
 
Warning Button
 
Primary buttons are normally displaying in “Yellow” which is predefined by Bootstrap.
 
Code sample
  1. <html>    
  2.     <head>    
  3.         <meta charset="utf-8">    
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
  5.         <title>Csharp corner warning</title>    
  6.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    
  7.         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    
  8.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>    
  9.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
  10.             
  11.     </head>    
  12.     <body>    
  13.         <button type="button" class="btn btn-warning"> csharp corner warning button</button>    
  14.     </body>    
  15. </html>    
 
 
Info Button
 
Primary buttons are normally displaying in “light blue” which is predefined by bootstrap.
 
Code sample
  1. <html>    
  2.     <head>    
  3.         <meta charset="utf-8">    
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
  5.         <title>Csharp corner Info</title>    
  6.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    
  7.         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    
  8.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>    
  9.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
  10.             
  11.     </head>    
  12.     <body>    
  13.         <button type="button" class="btn btn-info"> csharp corner info button</button>    
  14.     </body>    
  15. </html>    
 
 
Light Button
 
Primary buttons are normally displaying in “Light grey” which is predefined by Bootstrap.
 
Code sample
  1. <html>    
  2.     <head>    
  3.         <meta charset="utf-8">    
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
  5.         <title>Csharp corner Light</title>    
  6.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    
  7.         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    
  8.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>    
  9.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
  10.             
  11.     </head>    
  12.     <body>    
  13.         <button type="button" class="btn btn-light"> csharp corner Light button</button>    
  14.     </body>    
  15. </html>    
 
Dark Button
 
Primary buttons are normally displaying in” Black” which is predefined by Bootstrap.
 
Code sample
  1. <html>    
  2.     <head>    
  3.         <meta charset="utf-8">    
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
  5.         <title>Csharp corner Dark</title>    
  6.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    
  7.         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    
  8.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>    
  9.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
  10.             
  11.     </head>    
  12.     <body>    
  13.         <button type="button" class="btn btn-dark"> csharp corner Dark button</button>    
  14.     </body>    
  15. </html>   
 
 

Summary

 
Finally, we successfully used all Bootstrap buttons on the web page.
Next Recommended Reading How To Create A Responsive Bootstrap Table