Open In App

Bootstrap 5 | Buttons

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

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Buttons are the components provided to create various buttons. Bootstrap 5 includes several predefined button styles, each serving its own purpose.

Syntax:

<button class="badge bg-type"> Button Text <button>

Types: Following are the nine types of buttons available in Bootstrap 5:

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

 Example 1: This example uses shows the working of the first five types of buttons in Bootstrap 5.

HTML
<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>

    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
</head>
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div style="width: 600px;height: 200px;
            margin:20px;text-align: center;">
        <button type="button" class="btn btn-info">
            Info
        </button>
        <button type="button" class="btn btn-light">
            Light
        </button>
        <button type="button" class="btn btn-dark">
            Dark
        </button>
        <button type="button" class="btn btn-link">
            Link
        </button>
    </div>
</body>
</html>

Output:

Button Outlines: Bootstrap 5 provides a series of classes that can be used when we need to use outline-styled buttons in our project, i.e. buttons without background color. The outline button classes remove any background color or background image style applied to the buttons. All the button types support it as given in the example below:

Example: This example uses shows the working of different outline buttons in Bootstrap 5.

HTML
<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
</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:

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

Example: This example uses show the working of a button’s disabled state in Bootstrap 5.

HTML
<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
</head>
<body style="text-align:center;" style="width:700px;">
    <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:



Last Updated : 18 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads