Bootstrap 4 - Buttons

Description

Bootstrap provides clickable button to put content such as text and images. You can include the text to button by using the <input> tag.

You can create button by using .btn class followed by desired style (e.g. btn-success). Bootstrap provides some options to style buttons, which are listed below −

btn-primary
btn-secondary
btn-success
btn-danger
btn-warning
btn-info
btn-light
btn-dark
btn-link

The following example demonstrates all the above button classes −

Example

Live Demo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class="container">
         <h2>Button Styles</h2>
         <button type = "button" class = "btn btn-primary">Primary Button</button>
         <button type = "button" class = "btn btn-secondary">Secondary Button</button>
         <button type = "button" class = "btn btn-success">Success Button</button>
         <button type = "button" class = "btn btn-danger">Danger Button</button>
         <button type = "button" class = "btn btn-warning">Warning Button</button>
         <button type = "button" class = "btn btn-info">Info Button</button>
         <button type = "button" class = "btn btn-light">Light Button</button><br><br>
         <button type = "button" class = "btn btn-dark">Dark Button</button>
         <button type = "button" class = "btn btn-link">Link Button</button>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Outline Buttons

Bootstrap 4 provides semantic color to outline of a button by using .btn-outline class followed by desired style (e.g. btn-outline-success).

The following example demonstrates displaying of outlined buttons −

Example

Live Demo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Button Outlines</h2>
         <button type = "button" class = "btn btn-outline-primary">Primary Button</button>
         <button type = "button" class = "btn btn-outline-secondary">Secondary Button</button>
         <button type = "button" class = "btn btn-outline-success">Success Button</button>
         <button type = "button" class = "btn btn-outline-danger">Danger Button</button>
         <button type = "button" class = "btn btn-outline-light">Light Button</button>
         <button type = "button" class = "btn btn-outline-warning">Warning Button</button>
         <button type = "button" class = "btn btn-outline-info">Info Button</button>
         <button type = "button" class = "btn btn-outline-dark">Dark Button</button>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Button Sizes and Block Level Buttons

Bootstrap 4 provides smaller and larger buttons by using .btn-sm and .btn-lg classes and .btn-block class creates block level button that span the full width of a parent as shown in the example below −

Example

Live Demo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Button Sizes</h2>
         <button type = "button" class = "btn btn-info btn-sm">Small button</button>
         <button type = "button" class = "btn btn-info">Default button</button>
         <button type = "button" class = "btn btn-info btn-lg">Large button</button>
         </br>
         </br>
         
         <h2>Block Level Button</h2>
         <button type = "button" class = "btn btn-info btn-lg btn-block">
            Block Level Info Button
         </button>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Active and Disabled State

Bootstrap allows you to change the state of buttons as active and disabled. Buttons will appear pressed when it's in active state and button will lose the gradient and fade in color by 50%, then we say it's in disabled state.

Use the .active class to show activated button and add the disabled attribute to make the button inactive. The following example demonstrates states of button −

Example

Live Demo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
  
   <body>
      <div class = "container">
         <h2>Active State</h2>
         <button type = "button" class = "btn btn-lg btn-primary" >
            Active button
         </button>
         <br>
         <br>
         
         <h2>Disabled State</h2>
         <button type = "button" class = "btn btn-primary btn-lg" disabled>
            Disabled Button
         </button>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Toggle Checkboxes and Radio Buttons

Bootstrap 4 allows applying button styles to radio buttons and checkboxes to make use of toggle feature. You can provide toggling of checkboxes and radio buttons inside a <label> element, by adding data-toggle="buttons" inside .btn-group element.

The following example demonstrates toggling of checkboxes and radio buttons −

Example

Live Demo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class = "container">
         <h2>Checkbox</h2>
         <div class = "btn-group btn-group-toggle" data-toggle = "buttons">
            <label class = "btn btn-info active">
               <input type = "checkbox" name = "options" id = "option1" autocomplete = "off" checked> 
               HTML-5
            </label>
            <label class = "btn btn-info">
               <input type = "checkbox" name = "options" id = "option2" autocomplete = "off"> 
               CSS-3
            </label>
            <label class = "btn btn-info">
               <input type = "checkbox" name = "options" id = "option3" autocomplete = "off"> 
               Bootstrap-4
            </label>
         </div>
         <br>
         <br>
         
         <h2>Radio Buttons</h2>
         <div class = "btn-group btn-group-toggle" data-toggle = "buttons">
            <label class = "btn btn-primary active">
               <input type = "radio" name = "options" id = "option1" autocomplete = "off" checked> 
               HTML-5
            </label>
            <label class = "btn btn-primary">
               <input type = "radio" name = "options" id = "option2" autocomplete = "off"> 
               CSS-3
            </label>
            <label class = "btn btn-primary">
               <input type = "radio" name = "options" id = "option3" autocomplete = "off"> 
               Bootstrap-4
            </label>
         </div>
      </div>
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

bootstrap4_components.htm