Intro Bootstrap 5

by oktaviardi pratama

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

    <!-- 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>
   ...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

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

JavaScript

">