Open In App

Bootstrap 4 | Buttons

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

html




<!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>               



Output:

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

Example:

html




<!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>              



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:

html




<!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>            



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:

html




<!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>                 



Output:

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

Example:

html




<!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>                   



Output:

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

Example:

html




<!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>                  



Output:

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

Example:

html




<!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>                   



Output:

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

html




<!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>                   



Output:

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 28 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads