Bootstrap 4 | Buttons

Bootstrap provides different classes that can be used with different tags, such as <button>, <a>, <input>, and <label> to apply custom button styles. Bootstrap also provides classes that can be used for changing the state and size of buttons. Also, it provides classes for applying toggle, checkbox and radio buttons like effects.
Bootstrap contains many classes to set the style of the button element. The list of button classes are given below:

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

   

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Buttons</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
    <div class="container mt-3">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>Buttons</h2
          
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
    </div
</body
  
</html>                    

chevron_right


Output:

Note: The <a>, <button> and <input> elements are used to hold the button classes.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Buttons</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
    <div class="container mt-3">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>Button Elements</h2
          
        <input class="btn btn-success" type="button" value="Input Button">
        <input class="btn btn-success" type="submit" value="Submit Button">
        <input class="btn btn-success" type="reset" value="Reset Button">
        <button class="btn btn-success" type="button">Button</button>
        <a href="#" class="btn btn-success" role="button">Link Button</a>
    </div
</body
  
</html>                    

chevron_right


Output:

Button Outlines: Bootstrap provides a series of classes that can be used when we need to use outline styled buttons in our project, i.e. button without background color. The outline button classes remove any background color or background image style applied to the buttons. These classes are listed below:

  • .btn-outline-primary
  • .btn-outline-secondary
  • .btn-outline-success
  • .btn-outline-info
  • .btn-outline-warning
  • .btn-outline-danger
  • .btn-outline-dark
  • .btn-outline-light
  • .btn-outline-link

   

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Buttons</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
    <div class="container mt-3">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>Button Outline</h2
          
        <button type="button" class="btn btn-outline-primary">
            Primary
        </button
          
        <button type="button" class="btn btn-outline-secondary">
            Secondary
        </button
          
        <button type="button" class="btn btn-outline-success">
            Success
        </button
          
        <button type="button" class="btn btn-outline-danger">
            Danger
        </button
          
        <button type="button" class="btn btn-outline-warning">
            Warning
        </button
          
        <button type="button" class="btn btn-outline-info">
            Info
        </button
          
        <button type="button" class="btn btn-outline-light">
            Light
        </button
        <button type="button" class="btn btn-outline-dark">
            Dark
        </button
    </div
</body
  
</html>                    

chevron_right


Output:

Button Sizes: Bootstrap provides different classes that allow to changing the size of the button. The .btn-lg and .btn-sm classes are used for large and small buttons.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Buttons</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
    <div class="container mt-3">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>Button Sizes</h2
          
        <button type="button" class="btn btn-success btn-sm">
            Small Button
        </button
          
        <button type="button" class="btn btn-success">
            Default Button
        </button
          
        <button type="button" class="btn btn-success btn-lg">
            Large Button
        </button
    </div
</body
  
</html>                    

chevron_right


Output:

Active State Buttons: The .active class is used to make button and link to active state.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Buttons</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
    <div class="container mt-3">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>Button Active State</h2
          
        <button type="button" class="btn btn-success">
            Default Button
        </button
          
        <button type="button" class="btn btn-success active">
            Active Button
        </button
    </div
</body
  
</html>                    

chevron_right


Output:

Disabled State Buttons: The disabled attribute is used with <button> element to set the disabled state of button.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Buttons</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
    <div class="container mt-3">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>Button Disabled State</h2
          
        <button type="button" class="btn btn-primary" disabled>
            Disabled Button
        </button
          
        <button type="button" class="btn btn-success" disabled>
            Disabled Button
        </button
    </div
</body
  
</html>                    

chevron_right


Output:

Block Level Buttons: The .btn-block class is used to create block-level button which takes all width of parent element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Buttons</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
    <div class="container mt-3">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>Block Level Buttons</h2
          
        <button type="button" class="btn btn-block btn-primary">
            Block Level Button
        </button
          
        <button type="button" class="btn btn-block btn-success">
            Block Level Button
        </button
    </div
</body
  
</html>                    

chevron_right


Output:

Spinner Buttons: The spinner-* classes are used to add spinner to the button.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>Bootstrap Buttons</title
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
    <div class="container mt-3">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>Spinner Buttons</h2
          
        <button type="button" class="btn btn-primary">
            <span class="spinner-border spinner-border-sm"></span>
            Spinner Button
        </button
          
        <button type="button" class="btn btn-success">
            <span class="spinner-grow spinner-grow-sm"></span>
            Spinner Button
        </button
    </div
</body
  
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.