Intro Bootstrap 5

by oktaviardi pratama

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.min.js"></script>
<!-- 1. BOOTSTRAP CSS (Via CDN) -->
    <!-- Letakkan di dalam  sebelum CSS custom -->
    

    <!-- Container utama Bootstrap untuk memberi jarak rapi -->
    <div class="container mt-5">

        <h1 class="text-primary mb-4">Halo, Bootstrap 5! 🎉</h1>
        <p class="lead">Ini adalah contoh halaman menggunakan framework Bootstrap via CDN.</p>

        <!-- Contoh Komponen: Tombol (Button) -->
        <div class="mb-4">
            <h3>Contoh Tombol Siap Pakai:</h3>
            <!-- Kelas 'btn' adalah dasar, 'btn-primary' memberi warna biru -->
            <button type="button" class="btn btn-primary me-2">Primary</button>
            <button type="button" class="btn btn-success me-2">Success</button>
            <button type="button" class="btn btn-danger me-2">Danger</button>
            <button type="button" class="btn btn-outline-dark">Outline Dark</button>
        </div>

        <!-- Contoh Komponen: Alert -->
        <div class="alert alert-info" role="alert">
            Ini adalah <strong>alert box</strong> bawaan Bootstrap. Sangat mudah dibuat!
        </div>

        <!-- Contoh Grid Sederhana -->
        <div class="row mt-5">
            <div class="col-md-4">
                <div class="card p-3 shadow-sm">
                    <h5>Kolom 1</h5>
                    <p>Grid Bootstrap otomatis responsif.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card p-3 shadow-sm">
                    <h5>Kolom 2</h5>
                    <p>Coba kecilkan layar browser Anda.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card p-3 shadow-sm">
                    <h5>Kolom 3</h5>
                    <p>Kartu akan turun ke bawah secara otomatis.</p>
                </div>
            </div>
       ...

CSS

/* CSS Custom tetap bisa digunakan bersama Bootstrap */
        .custom-box {
            background-color: #f8f9fa;
            border: 2px dashed #6c757d;
            padding: 20px;
            margin-top: 20px;
        }