This article demonstrates an Example of Bootstrap Buttons.

The following code shows an example of creating various types of buttons with different sizes and styles and experimenting with button groups using Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Bootstrap Buttons Example</title>
    <style>
        /* Custom style for better visualization */
        body {
            padding: 20px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1 class="mb-4">Bootstrap Buttons</h1>

        <!-- Standard Buttons -->
        <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>
        <button type="button" class="btn btn-dark">Dark Button</button>

        <hr>

        <!-- Outline Buttons -->
        <button type="button" class="btn btn-outline-primary">Primary Outline Button</button>
        <button type="button" class="btn btn-outline-secondary">Secondary Outline Button</button>
        <button type="button" class="btn btn-outline-success">Success Outline Button</button>
        <button type="button" class="btn btn-outline-danger">Danger Outline Button</button>
        <button type="button" class="btn btn-outline-warning">Warning Outline Button</button>
        <button type="button" class="btn btn-outline-info">Info Outline Button</button>
        <button type="button" class="btn btn-outline-light">Light Outline Button</button>
        <button type="button" class="btn btn-outline-dark">Dark Outline Button</button>

        <hr>

        <!-- Button Sizes -->
        <button type="button" class="btn btn-primary btn-lg">Large Button</button>
        <button type="button" class="btn btn-secondary">Default Size Button</button>
        <button type="button" class="btn btn-success btn-sm">Small Button</button>

        <hr>

        <!-- Button Groups -->
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-secondary">Left</button>
            <button type="button" class="btn btn-secondary">Middle</button>
            <button type="button" class="btn btn-secondary">Right</button>
        </div>

        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-secondary">1</button>
            <button type="button" class="btn btn-secondary">2</button>

            <div class="btn-group" role="group">
                <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </button>
                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                    <a class="dropdown-item" href="#">Dropdown Item 1</a>
                    <a class="dropdown-item" href="#">Dropdown Item 2</a>
                </div>
            </div>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

In this example:

  • Various types of buttons are created using different contextual classes (btn-primary, btn-secondary, etc.).
  • Outline buttons are created using the btn-outline-* classes.
  • Button sizes are adjusted using the btn-lg, btn-sm, etc. classes.
  • Button groups are demonstrated, including basic button groups and a button group with a nested dropdown.
Demonstrating an Example of Bootstrap Buttons
Demonstrating an Example of Bootstrap Buttons

Further Reading

Evolution of JavaScript from ES1 to ES2020

Introduction to HTML DOM Methods in JavaScript

JavaScript Practice Exercise

Understanding Document Object Model (DOM) in JavaScript

Creating Classes in JavaScript

Bootstrap Frequently Asked Questions

Most Popular Bootstrap Interview Questions and Answers

programmingempire

Princites