Button Style dengan Bootstrap

Website resmi:

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tombol Bootstrap</title>
    <link href="https://kursus.kitakale.id/vendor/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://kursus.kitakale.id/vendor/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container content">
        <div class="row align-items-center justify-content-center">
            <div class="col-md-10 text-left">
                <h2 class="mb-5">#01 &mdash; Bootstrap 4 Buttons</h2>
                <div class="d-block mb-5 d-flex">
                    <div class="mb-3 mr-3">
                        <div class="text-center"><h5>Large</h5></div>
                        <button class="btn btn-primary btn-lg">Button</button>
                    </div>
                    <div class="mb-3 mr-3">
                        <div class="text-center"><h5>Medium</h5></div>
                        <button class="btn btn-primary">Button</button>
                    </div>
                    <div class="mb-3 mr-3">
                        <div class="text-center"><h5>Small</h5></div>
                        <button class="btn btn-primary btn-sm">Button</button>
                    </div>
                </div>
                <div class=" mb-3">
                    <h3 class="text-center">Button Colors</h3>
                </div>
                <div class="mb-5">
                    <button class="btn mb-3 mr-3 btn-primary">Primary</button>
                    <button class="btn mb-3 mr-3 btn-secondary">Secondary</button>
                    <button class="btn mb-3 mr-3 btn-success">Success</button>
                    <button class="btn mb-3 mr-3 btn-info">Info</button>
                    <button class="btn mb-3 mr-3 btn-warning">Warning</button>
                    <button class="btn mb-3 mr-3 btn-danger">Danger</button>
                    <button class="btn mb-3 mr-3 btn-light">Light</button>
                    <button class="btn mb-3 mr-3 btn-orange">Orange</button>
                    <button class="btn mb-3 mr-3 btn-indigo">Indigo</button>
                    <button class="btn mb-3 mr-3 btn-pink">Pink</button>
                    <button class="btn mb-3 mr-3 btn-deep-orange">Deep Orange</button>
                    <button class="btn mb-3 mr-3 btn-aqua">Aqua</button>
                    <button class="btn mb-3 mr-3 btn-dark">Dark</button>
                    <button class="btn mb-3 mr-3 btn-black">Black</button>
                    <button class="btn mb-3 mr-3 btn-purple">Purple</button>
                    <button class="btn mb-3 mr-3 btn-blue">Blue</button>
                    <button class="btn mb-3 mr-3 btn-brown">Brown</button>
                    <button class="btn mb-3 mr-3 btn-blue-gray">Blue Gray</button>
                </div>
                <div class="d-grid gap-2 mb-3">
                    <button class="btn btn-primary" type="button">Button</button>
                </div>
                <div class="mb-3 mr-3">
                    <button class="btn btn-primary btn-block">Button</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Hasil:

PreviousSweetAlert2 NextLayout Grid Responsife dengan Bootstrap

Last updated 9 months ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tombol Bootstrap</title> <link href="https://kursus.kitakale.id/vendor/css/bootstrap.min.css" rel="stylesheet"> <link href="https://kursus.kitakale.id/vendor/css/style.css" rel="stylesheet"> </head> <body> <div class="container content"> <div class="row align-items-center justify-content-center"> <div class="col-md-10 text-left"> <h2 class="mb-5">#01 — Bootstrap 4 Buttons</h2> <div class="d-block mb-5 d-flex"> <div class="mb-3 mr-3"> <div class="text-center"><h5>Large</h5></div> <button class="btn btn-primary btn-lg">Button</button> </div> <div class="mb-3 mr-3"> <div class="text-center"><h5>Medium</h5></div> <button class="btn btn-primary">Button</button> </div> <div class="mb-3 mr-3"> <div class="text-center"><h5>Small</h5></div> <button class="btn btn-primary btn-sm">Button</button> </div> </div> <div class=" mb-3"> <h3 class="text-center">Button Colors</h3> </div> <div class="mb-5"> <button class="btn mb-3 mr-3 btn-primary">Primary</button> <button class="btn mb-3 mr-3 btn-secondary">Secondary</button> <button class="btn mb-3 mr-3 btn-success">Success</button> <button class="btn mb-3 mr-3 btn-info">Info</button> <button class="btn mb-3 mr-3 btn-warning">Warning</button> <button class="btn mb-3 mr-3 btn-danger">Danger</button> <button class="btn mb-3 mr-3 btn-light">Light</button> <button class="btn mb-3 mr-3 btn-orange">Orange</button> <button class="btn mb-3 mr-3 btn-indigo">Indigo</button> <button class="btn mb-3 mr-3 btn-pink">Pink</button> <button class="btn mb-3 mr-3 btn-deep-orange">Deep Orange</button> <button class="btn mb-3 mr-3 btn-aqua">Aqua</button> <button class="btn mb-3 mr-3 btn-dark">Dark</button> <button class="btn mb-3 mr-3 btn-black">Black</button> <button class="btn mb-3 mr-3 btn-purple">Purple</button> <button class="btn mb-3 mr-3 btn-blue">Blue</button> <button class="btn mb-3 mr-3 btn-brown">Brown</button> <button class="btn mb-3 mr-3 btn-blue-gray">Blue Gray</button> </div> <div class="d-grid gap-2 mb-3"> <button class="btn btn-primary" type="button">Button</button> </div> <div class="mb-3 mr-3"> <button class="btn btn-primary btn-block">Button</button> </div> </div> </div> </div> </body> </html>