Bootstrap 5 Buttons

Last Updated : 25 Jul, 2024

Bootstrap 5 Buttons are pre-styled components in the Bootstrap framework, offering consistent design and functionality. They streamline development by providing ready-to-use button styles, sizes, and behaviors, ensuring a cohesive and responsive user interface across web applications with minimal CSS customization.

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

Examples of Bootstrap 5 Buttons

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:

Bootstrap 5 | Button group

gurrrung

Improve

Article Tags :

Bootstrap 5 Buttons

Examples of Bootstrap 5 Buttons

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?