Bootstrap Grid Practice

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">
<!-- Link Bootstrap CSS -->
    <div class="container mt-5">
        <h2 class="mb-4 text-center">Demo Grid Bootstrap</h2>
        <p class="text-center mb-5">
            Kecilkan layar browser Anda.<br>
            <strong>Desktop:</strong> 3 Kolom Sejajar.<br>
            <strong>Mobile:</strong> 1 Kolom Menumpuk.
        </p>

        <!-- ROW UTAMA -->
        <div class="row">

            <!-- KOLOM 1 -->
            <!-- col-12: Di mobile ambil 12 kolom (penuh) -->
            <!-- col-md-4: Di tablet/desktop ambil 4 kolom (sepertiga) -->
            <div class="col-12 col-md-4">
                <div class="demo-box">
                    <h3>Kolom 1</h3>
                    <p>Saya mengambil 4/12 ruang di desktop.</p>
                </div>
            </div>

            <!-- KOLOM 2 -->
            <div class="col-12 col-md-4">
                <div class="demo-box bg-custom">
                    <h3>Kolom 2</h3>
                    <p>Saya juga 4/12 ruang di desktop.</p>
                </div>
            </div>

            <!-- KOLOM 3 -->
            <div class="col-12 col-md-4">
                <div class="demo-box bg-warning-custom">
                    <h3>Kolom 3</h3>
                    <p>Total kita bertiga = 12/12 (Penuh).</p>
                </div>
            </div>

        </div>

        <!-- Contoh Tambahan: Layout Asimetris -->
        <h4 class="mt-5 mb-3">Contoh Lain: Sidebar & Konten</h4>
        <div class="row">
            <!-- Sidebar:...

CSS

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

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}/* Styling tambahan hanya untuk visualisasi kotak */
        .demo-box {
            background-color: #0d6efd; /* Biru Bootstrap Primary */
            color: white;
            text-align: center;
            padding: 20px;
            font-weight: bold;
            border-radius: 8px;
            margin-bottom: 10px; /* Jarak antar baris jika menumpuk */
        }
        .bg-custom { background-color: #198754; } /* Hijau */
        .bg-warning-custom { background-color: #ffc107; color: black; } /* Kuning */

JavaScript

">