WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Buttons


Bootstrap four gives 9 predefined styles for buttons — every serving a one in every of a kind semantic reason. To fashion a button, use Bootstrap's .Btn beauty, followed via the preferred style. For instance, elegance="btn btn-number one" results in a number one button.Bootstrap gives some alternatives to style buttons, which can be indexed beneath −
  • btn-primary

  • btn-secondary

  • btn-achievement

  • btn-hazard

  • btn-caution

  • btn-facts

  • btn-mild

  • btn-darkish

  • btn-hyperlink

<html lang = "en">
    <head>
        <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta call = "viewport" content = "width = device-width, preliminary-scale = 1, lower-to-healthful = no">

        <!-- Bootstrap CSS -->
        <hyperlink rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "nameless">

        <become aware of>Bootstrap four Example</name>
    </head>

    <body>
        <div class="field">
            <h2>Button Styles</h2>
            <button kind = "button" beauty = "btn btn-primary">Primary Button</button>
            <button type = "button" elegance = "btn btn-secondary">Secondary Button</button>
            <button type = "button" class = "btn btn-fulfillment">Success Button</button>
            <button kind = "button" magnificence = "btn btn-chance">Danger Button</button>
            <button type = "button" elegance = "btn btn-caution">Warning Button</button>
            <button kind = "button" elegance = "btn btn-statistics">Info Button</button>
            <button type = "button" class = "btn btn-slight">Light Button</button><br><br>
            <button type = "button" magnificence = "btn btn-dark">Dark Button</button>
            <button type = "button" elegance = "btn btn-hyperlink">Link Button</button>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-three.Three.1.Slim.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "nameless">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.Three/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "nameless">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "anonymous">
        </script>

    </body>
</html>

It will produce the following stop result −

Output