Tutorial Belajar Bootstrap Bagian 2 : Memahami Grid System di Bootsrap

Penulis

12 April 2021

1047

Pada tutorial sebelumnya, kita sudah membahas Tutorial Belajar Bootstrap Bagian 1 : Cara Menggunakan Bootstrap, selanjutnya kita akan belajar cara menggunakan grid system di bootstrap.

Apa itu Bootstrap Grid System

Sistem grid bootstrap menyediakan cara cepat dan nyaman untuk membuat tata letak situs web yang responsif.

Versi Bootstrap 4 terbaru memperkenalkan sistem grid flexbox mobile-first baru yang secara tepat menskalakan hingga 12 kolom saat perangkat atau ukuran viewport bertambah.

Bootstrap 4 menyertakan grid class yang telah ditentukan sebelumnya untuk membuat tata letak kisi dengan cepat untuk berbagai jenis perangkat seperti ponsel, tablet, laptop dan desktop, dll.

Class .col-* untuk membuat kolom grid untuk perangkat ekstra kecil ponsel dalam mode portrait.
Class .col-sm-* untuk membuat kolom grid untuk perangkat layar kecil seperti ponsel dalam mode lanskap.
Class .col-md-* untuk perangkat layar menengah seperti tablet.
Class .col-lg-* untuk perangkat besar seperti desktop.
Class .col-xl-* untuk layar desktop ekstra besar.

Tabel berikut merangkum beberapa fitur utama dari grid system terbaru.

Tabel di atas menunjukkan satu hal penting, menerapkan class .col-sm-* apa pun ke elemen tidak hanya akan memengaruhi stylenya pada perangkat kecil, tetapi juga pada perangkat sedang, besar, dan ekstra besar yang memiliki lebar layar lebih dari atau sama dengan 540 piksel, jika Class .col-md-*, .col-lg-* atau .col-xl-* tidak ada.

Demikian pula, class .col-md-* tidak hanya akan memengaruhi style elemen pada perangkat sedang, tetapi juga pada perangkat besar dan ekstra besar jika class .col-lg-* atau .col-xl-* tidak ada.

Sekarang muncul pertanyaan bagaimana membuat baris dan kolom menggunakan sistem grid responsif 12 kolom ini.

Jawabannya cukup sederhana, pertama-tama buat wadah yang berfungsi sebagai pembungkus untuk baris dan kolom Anda menggunakan class .container, setelah itu buat baris di dalam wadah menggunakan class .row, dan untuk membuat kolom di dalam baris mana pun yang dapat Anda gunakan class .col-*, .col-sm-*, .col-md-*, .col-lg-* dan .col-xl-*.

Kolom adalah area konten aktual tempat kita akan menempatkan konten. Mari kita lihat cara kerjanya:

Membuat Tata Letak 2 Kolom

Contoh berikut akan menunjukkan kepada Anda cara membuat layout 2 kolom untuk perangkat sedang, besar dan ekstra besar seperti meja, laptop dan desktop dll.

Namun, pada ponsel (lebar layar kurang dari 768 piksel), kolom secara otomatis akan menjadi horizontal.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 5 Beta 2 Kolom Grid Layouts Untuk Tablet dan Desktop</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa kustom style dibuat untuk mempercantik contoh */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        background: #dbdfe5;
        margin-bottom: 15px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
    <h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
	<div class="text-center"> Ubah ukuran jendela browser untuk memahami cara kerja grid system responsif Bootstrap.</div>
    <div class="container mt-3">
        <!-- Baris dengan dua kolom yang sama -->
        <div class="row">
            <div class="col-md-6">
                <div class="demo-content">.col-md-6</div>
            </div>
            <div class="col-md-6">
                <div class="demo-content bg-alt">.col-md-6</div>
            </div>
        </div>
        
        <!-- Baris dengan dua kolom dibagi dalam rasio 1: 2 -->
        <div class="row">
            <div class="col-md-4">
                <div class="demo-content">.col-md-4</div>
            </div>
            <div class="col-md-8">
                <div class="demo-content bg-alt">.col-md-8</div>
            </div>
        </div>
        
        <!--Row with dua columns divided in 1:3 ratio-->
        <div class="row">
            <div class="col-md-3">
                <div class="demo-content">.col-md-3</div>
            </div>
            <div class="col-md-9">
                <div class="demo-content bg-alt">.col-md-9</div>
            </div>
        </div>
    </div>
</body>
</html>

Catatan: Dalam grid layout, konten harus ditempatkan di dalam kolom (.col dan .col-*) dan hanya kolom yang boleh menjadi turunan langsung dari baris (.row). Baris harus ditempatkan di dalam .container (lebar tetap) atau .container-fluid (lebar penuh) untuk bantalan dan perataan yang tepat.

Tips: Lebar kolom grid diatur dalam persentase, sehingga selalu dapat disesuaikan dan ukurannya relatif terhadap elemen induknya. Selain itu, setiap kolom memiliki bantalan horizontal (disebut gutter) untuk mengontrol ruang antar kolom individu.

Karena sistem grid Bootstrap didasarkan pada 12 kolom, oleh karena itu untuk menjaga kolom dalam satu baris (yaitu berdampingan), jumlah nomor kolom grid dalam satu baris tidak boleh lebih dari 12.

Jika Anda memperhatikan kode di atas, Anda akan menemukan jumlah kolom grid (yaitu col-md-*) dijumlahkan hingga dua belas (6 + 6, 4 + 8 dan 3 + 9) untuk setiap baris.

Membuat Tata Letak 3 Kolom

Demikian pula, Anda dapat membuat layout lain berdasarkan prinsip di atas. Misalnya, contoh berikut biasanya akan membuat tata letak 3 kolom untuk layar laptop dan desktop.

Ini juga berfungsi di tablet dalam mode landscape jika resolusi layar lebih dari atau sama dengan 992 piksel (mis.Apple iPad).

Namun, dalam mode portrait, grid kolom akan menjadi horizontal seperti biasa.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Tiga Kolom Grid Layout untuk Tablet (landscape) dan Desktop</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa style custom untuk mempercantik contohnya */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        background: #dbdfe5;
        margin-bottom: 15px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
    <h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
	<div class="text-center"> Buka keluaran di tab kosong baru (Klik tanda panah di samping tombol "Tampilkan Keluaran") dan ubah ukuran jendela browser untuk memahami cara kerja grid sysem responsif Bootstrap.</div>
    <div class="container mt-3">
        <!-- Baris dengan tiga kolom yang sama -->
        <div class="row">
            <div class="col-lg-4">
                <div class="demo-content">.col-lg-4</div>
            </div>
            <div class="col-lg-4">
                <div class="demo-content bg-alt">.col-lg-4</div>
            </div>
            <div class="col-lg-4">
                <div class="demo-content">.col-lg-4</div>
            </div>
        </div>

        <!-- Baris dengan tiga kolom dibagi dalam rasio 1: 4: 1 -->
        <div class="row">
            <div class="col-lg-2">
                <div class="demo-content">.col-lg-2</div>
            </div>
            <div class="col-lg-8">
                <div class="demo-content bg-alt">.col-lg-8</div>
            </div>
            <div class="col-lg-2">
                <div class="demo-content">.col-lg-2</div>
            </div>
        </div>

        <!-- Baris dengan tiga kolom dibagi tidak rata -->
        <div class="row">
            <div class="col-lg-3">
                <div class="demo-content">.col-lg-3</div>
            </div>
            <div class="col-lg-7">
                <div class="demo-content bg-alt">.col-lg-7</div>
            </div>
            <div class="col-lg-2">
                <div class="demo-content">.col-lg-2</div>
            </div>
        </div>
    </div>
</body>
</html>

Catatan: Jika lebih dari 12 kolom grid ditempatkan dalam satu baris, maka setiap grup kolom tambahan, secara keseluruhan, akan digabungkan ke dalam baris baru.

Kolom Tata Letak Otomatis Bootstrap

Anda juga dapat membuat kolom dengan lebar yang sama untuk semua perangkat (ekstra kecil, kecil, sedang, besar, dan ekstra besar) hanya dengan menggunakan class .col, tanpa menentukan nomor kolom apa pun.

Mari kita coba contoh berikut untuk memahami cara kerjanya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Bootstrap 4 Kolom Tata Letak Otomatis </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa style custom untuk mempercantik contohnya */
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    .col{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
<div class="container">
    <!-- Baris dengan dua kolom yang sama -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>

    <!-- Baris dengan tiga kolom yang sama -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</div>
</body>
</html>

Selain itu, Anda juga bisa mengatur lebar satu kolom dan membiarkan kolom saudaranya secara otomatis mengubah ukurannya secara merata.

Anda dapat menggunakan class grid yang telah ditentukan atau lebar sebaris.

Jika Anda mencoba contoh berikut, Anda akan menemukan kolom dalam satu baris dengan class .col memiliki lebar yang sama.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Bootstrap 4 Ubah Ukuran Kolom Secara Otomatis </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa style custom untuk mempercantik contohnya */
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    [class^=col]{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
    <div class="container">
        <!-- Baris dengan dua kolom yang sama -->
        <div class="row">
            <div class="col">.col</div>
            <div class="col">.col</div>
        </div>
        
        <!-- Baris dengan tiga kolom dibagi dalam rasio 1: 2: 1 -->
        <div class="row">
            <div class="col">.col</div>
            <div class="col-sm-6">.col-sm-6</div>
            <div class="col">.col</div>
        </div>
    </div>
</body>
</html>

Wrapping Kolom Behaviour

Sekarang kita akan membuat tata letak yang lebih fleksibel yang mengubah orientasi kolom berdasarkan ukuran viewport.

Contoh berikut akan membuat tata letak 3 kolom pada perangkat besar seperti laptop dan desktop, serta pada tablet (misalnya Apple iPad) dalam mode lanskap, tetapi pada perangkat menengah seperti tablet dalam mode portrait (768px ≤ lebar layar <992px), itu akan berubah menjadi tata letak 2 kolom di mana kolom ketiga bergerak di bagian bawah dua kolom pertama.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Kolom Wrapping</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
	/* Beberapa style custom untuk mempercantik contohnya */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        background: #dbdfe5;
        margin-bottom: 15px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
    <div class="container mt-3">
        <div class="row">
            <div class="col-md-4 col-lg-3">
                <div class="demo-content">.col-md-4 .col-lg-3</div>
            </div>
            <div class="col-md-8 col-lg-6">
                <div class="demo-content bg-alt">.col-md-8 .col-lg-6</div>
            </div>
            <div class="col-md-12 col-lg-3">
                <div class="demo-content">.col-md-12 .col-lg-3</div>
            </div>
        </div>
    </div>
</body>
</html>

Seperti yang Anda lihat pada contoh di atas, jumlah nomor kolom grid medium (yaitu col-md-*) adalah 3 + 9 + 12 = 24 > 12, oleh karena itu elemen <div> ketiga dengan class .col-md-12, menambahkan kolom ekstra di luar 12 kolom maksimum dalam sebuah .row, digabungkan ke baris baru sebagai satu unit yang berdekatan pada perangkat ukuran layar sedang.

Demikian pula, Anda dapat membuat tata letak yang lebih mudah beradaptasi untuk web Anda menggunakan fitur wrapping colimn grid Bootstrap.

Berikut adalah beberapa contoh grid Bootstrap yang siap digunakan.

Membuat Tata Letak Multi-Kolom dengan Bootstrap

Dengan sistem grid flexbox pertama seluler Bootstrap 4, Anda dapat dengan mudah mengontrol bagaimana tata letak situs web Anda akan ditampilkan pada berbagai jenis perangkat yang memiliki ukuran layar atau area pandang berbeda seperti ponsel, tablet, desktop, dll.

Dalam ilustrasi di atas terdapat total 12 kotak konten di semua perangkat, tetapi penempatannya bervariasi sesuai dengan ukuran layar perangkat, seperti pada perangkat seluler tata letak ditampilkan sebagai tata letak grid satu kolom yang memiliki 1 kolom dan 12 baris ditempatkan di atas satu sama lain, sedangkan di tablet itu dirender sebagai tata letak grid dua kolom yang memiliki 2 kolom dan 6 baris.

Selanjutnya, dalam perangkat ukuran layar besar seperti laptop dan desktop, ini ditampilkan sebagai tata letak grid tiga kolom yang memiliki 3 kolom dan 4 baris dan terakhir di perangkat layar ekstra besar seperti desktop besar ini ditampilkan sebagai tata letak kisi empat kolom yang memiliki 4 kolom dan 3 baris.

Sekarang pertanyaannya adalah bagaimana kita dapat membuat tata letak yang responsif menggunakan sistem grid baru Bootstrap ini.

Mari kita mulai dengan perangkat target utama.

Misalkan perangkat target utama kita adalah laptop atau desktop biasa. Karena layout laptop kita memiliki 3 kolom dan 4 baris yaitu layout grid 3×4, maka kode HTML untuk membuat struktur grid tersebut akan terlihat seperti ini.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Bootstrap 4 Tata Letak Grid untuk Perangkat Besar </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa style custom untuk mempercantik contohnya */
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #dbdfe5;
    }
</style>
</head>
<body>
    <h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
	<div class="text-center">Ubah ukuran jendela browser untuk memahami cara kerja sistem grid responsif Bootstrap.</div>
    <div class="container mt-3">
        <div class="row">
            <div class="col-lg-4"><p>Kotak 1</p></div>
            <div class="col-lg-4"><p>Kotak 2</p></div>
            <div class="col-lg-4"><p>Kotak 3</p></div>
            <div class="col-lg-4"><p>Kotak 4</p></div>
            <div class="col-lg-4"><p>Kotak 5</p></div>
            <div class="col-lg-4"><p>Kotak 6</p></div>
            <div class="col-lg-4"><p>Kotak 7</p></div>
            <div class="col-lg-4"><p>Kotak 8</p></div>
            <div class="col-lg-4"><p>Kotak 9</p></div>
            <div class="col-lg-4"><p>Kotak 10</p></div>
            <div class="col-lg-4"><p>Kotak 11</p></div>
            <div class="col-lg-4"><p>Kotak 12</p></div>
        </div>
    </div>
</body>
</html>

Jika Anda melihat hasil contoh di atas di laptop atau desktop yang memiliki layar atau viewport lebar lebih besar dari atau sama dengan 992px tetapi kurang dari 1200px, Anda akan menemukan tata letak memiliki 4 baris di mana setiap baris memiliki 3 kolom yang sama sehingga menghasilkan grid 3×4 tata letak.

Sekarang saatnya menyesuaikan tata letak untuk perangkat lain.

Mari kita mulai dengan menyesuaikannya untuk perangkat tablet. Sejak di dalam tablet tata letak dirender sebagai grid 2×6 (yaitu 2 kolom dan 6 baris).

Jadi, lanjutkan dan tambahkan class .col-md-6 di setiap kolom.

.col-md-6 di setiap kolom.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Bootstrap 4 Tata Letak Grid untuk Perangkat Besar </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa style custom untuk mempercantik contohnya */
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #dbdfe5;
    }
</style>
</head>
<body>
    <h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
	<div class="text-center">Ubah ukuran jendela browser untuk memahami cara kerja sistem grid responsif Bootstrap.</div>
    <div class="container mt-3">
        <div class="row">
            <div class="col-lg-4 col-md-6"><p>Kotak 1</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 2</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 3</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 4</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 5</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 6</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 7</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 8</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 9</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 10</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 11</p></div>
            <div class="col-lg-4 col-md-6"><p>Kotak 12</p></div>
        </div>
    </div>
</body>
</html>

Tip: Untuk kenyamanan pilih perangkat target utama Anda dan buat tata letak untuk perangkat itu terlebih dahulu setelah itu tambahkan class agar responsif untuk perangkat lain.

Demikian pula, Anda dapat menyesuaikan tata letak untuk perangkat ekstra besar seperti layar desktop besar dengan menambahkan class .col-xl-3 di setiap kolom, karena setiap baris dalam tata letak perangkat ekstra besar berisi 4 kolom.

Inilah kode terakhir setelah menggabungkan seluruh proses.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Bootstrap 4 Tata Letak Grid untuk Semua Perangkat </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa style custom untuk mempercantik contoh */
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #dbdfe5;
    }
</style>
</head>
<body>
    <h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
	<div class="text-center">Ubah ukuran jendela browser untuk memahami cara kerja sistem grid responsif Bootstrap.</div>
    <div class="container mt-3">
        <div class="row">
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 1</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 2</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 3</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 4</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 5</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 6</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 7</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 8</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 9</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 10</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 11</p></div>
            <div class="col-lg-4 col-md-6 col-xl-3"><p>Kotak 12</p></div>
        </div>
    </div>
</body>
</html>

Tip: Berdasarkan ilustrasi di atas, tidak perlu menyesuaikan tata letak untuk ponsel; karena kolom pada perangkat ekstra kecil akan secara otomatis menjadi horizontal dan dirender sebagai tata letak petak kolom 1×12 tanpa class .col-* atau .col-sm-*.

Penyusunan Kolom Grid

Kolom kisi Bootstrap juga dapat disarangkan, yang berarti Anda dapat meletakkan baris dan kolom di dalam kolom yang ada.

Namun, rumus untuk menempatkan kolom akan sama, yaitu jumlah nomor kolom harus sama dengan 12 atau kurang dalam satu baris.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Bootstrap 4 Baris dan Kolom Bersarang </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
	/* Beberapa style custom untuk mempercantik contoh*/
    .main-content{
		min-height: 230px;
        background: #dbdfe5;
    }
    .sidebar-content{
        min-height: 100px;
        margin-bottom: 30px;
        background: #b4bac0;
    }
</style>
</head>
<body>
<div class="container mt-3">
    <div class="row">
        <div class="col-sm-8">
            <div class="main-content"></div>
        </div>
        <div class="col-sm-4">
            <!-- Baris bersarang di dalam kolom -->
            <div class="row">
                <div class="col-12">
                    <div class="sidebar-content"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <div class="sidebar-content"></div>
                </div>
                <div class="col-6">
                    <div class="sidebar-content"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Membuat Variabel Lebar Kolom

Anda bisa menggunakan class col-{breakpoint}-auto untuk mengukur kolom berdasarkan lebar alami kontennya.

Coba contoh berikut untuk melihat cara kerjanya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Mengukur Kolom Berdasarkan Lebar Isinya </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
	/* Beberapa style custom untuk mempercantik contoh*/
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    [class^=col]{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-3">Kolom kiri</div>
            <div class="col-md-auto"> Kolom lebar variabel</div>
            <div class="col-md-3">Kolom kanan</div>
        </div>
        <div class="row">
            <div class="col">Kolom kiri</div>
            <div class="col-auto">Kolom lebar variabel</div>
            <div class="col">Kolom kanan</div>
        </div>
    </div>
    <p class="text-center mt-3"><strong>Note:</strong> Masukkan beberapa konten lagi di dalam kolom lebar variabel untuk memahami cara kerjanya.</p>
</body>
</html>

Perataan Kolom Grid

Anda dapat menggunakan utilitas penyelarasan flexbox untuk menyelaraskan kolom grid secara vertikal dan horizontal di dalam wadah.

Cobalah contoh berikut untuk memahami cara kerjanya:

Perataan Vertikal Kolom Kisi

Anda dapat menggunakan class .align-items-start, .align-items-center, dan .align-items-end untuk meratakan kolom petak secara vertikal di bagian atas, tengah, dan bawah penampung.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Bootstrap 4 Perataan Vertikal Kolom Grid</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
	/* Beberapa style custom untuk mempercantik contoh*/
    .row{
		min-height: 10rem;        
        margin-top: 1rem;
        background: #dbdfe5;
    }
    .col{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
<div class="container">
    <div class="row align-items-start">
        <div class="col">Kolom satu</div>
        <div class="col">Kolom dua</div>
        <div class="col">Kolom tiga</div>
    </div>
    <div class="row align-items-center">
        <div class="col">Kolom satu</div>
        <div class="col">Kolom dua</div>
        <div class="col">Kolom tiga</div>
    </div>
    <div class="row align-items-end">
        <div class="col">Kolom satu</div>
        <div class="col">Kolom dua</div>
        <div class="col">Kolom tiga</div>
    </div>
</div>
</body>
</html>

Kolom individu di dalam baris juga dapat disejajarkan secara vertikal. Berikut contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Vertical Alignments of Individual Grid Columns</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
	/* Some custom styles to beautify this example */
    .row{
		min-height: 10rem;        
        margin-top: 1rem;
        background: #dbdfe5;
    }
    .col{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col align-self-start">Kolom satu</div>
        <div class="col align-self-center">Kolom dua</div>
        <div class="col align-self-end">Kolom tiga</div>
    </div>
</div>
</body>
</html>

Catatan: Anda dapat melewati angka dalam class .col-* grid dan hanya menggunakan class .col untuk membuat kolom dengan ukuran yang sama untuk semua perangkat (ekstra kecil, kecil, sedang, besar, dan ekstra besar).

Perataan Horizontal Kolom Grid

Anda dapat menggunakan class .justify-content-start, .justify-content-center, dan .justify-content-end untuk meratakan kolom grid secara horizontal di kiri, tengah, dan kanan container.

Mari kita lihat contoh berikut untuk melihat cara kerjanya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Horizontal Alignments of Grid Columns</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
	/* Beberapa style custom untuk mempercantik contoh*/
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    [class^=col-]{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
<div class="container">
    <div class="row justify-content-start">
        <div class="col-4">Kolom satu</div>
        <div class="col-4">Kolom dua</div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4">Kolom satu</div>
        <div class="col-4">Kolom dua</div>
    </div>
    <div class="row justify-content-end">
        <div class="col-4">Kolom satu</div>
        <div class="col-4">Kolom dua</div>
    </div>
</div>
</body>
</html>

Alternatifnya, Anda dapat menggunakan class .justify-content-around untuk mendistribusikan kolom grid secara merata dengan spasi setengah di kedua ujungnya, sedangkan Anda dapat menggunakan class .justify-content-between untuk mendistribusikan kolom grid secara merata di tempat kolom pertama ditempatkan di awal dan kolom terakhir ditempatkan di akhir.

Cobalah contoh berikut untuk melihat cara kerjanya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Justify Grid Columns</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
	/* Beberapa style custom untuk mempercantik contoh */
    .row{   
        margin-top: 1rem;
        background: #dbdfe5;
    }
    [class^=col-]{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
<div class="container">
    <div class="row justify-content-around">
        <div class="col-4">Kolom satu</div>
        <div class="col-4">Kolom dua</div>
    </div>
    <div class="row justify-content-between">
        <div class="col-4">Kolom satu</div>
        <div class="col-4">Kolom dua</div>
    </div>
</div>
</body>
</html>

Penyusunan Ulang Kolom Grid

Anda bahkan dapat mengubah urutan visual kolom kisi Anda tanpa mengubah urutannya dalam markup yang sebenarnya.

Gunakan class .order-last untuk mengurutkan kolom di urutan terakhir, sedangkan gunakan class .order-first untuk mengurutkan kolom di tempat pertama.

Mari kita lihat contoh:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Susun Ulang Kolom Grid di Bootstrap 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa style custom untuk mempercantik contoh */
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    .col{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col order-last"> Pertama, tapi urutan akhir</div>
            <div class="col"> Kedua, tapi tidak berurutan </div>
            <div class="col order-first"> Terakhir, tapi urutan awal </div>
        </div>
    </div>
</body>
</html>

Anda juga dapat menggunakan class .order-* untuk mengurutkan kolom kisi bergantung pada nomor pesanan.

Kolom grid dengan nomor urut lebih tinggi muncul setelah kolom kisi dengan nomor urut lebih rendah atau kolom grid tanpa class urut.

Ini mencakup dukungan untuk 1 hingga 12 di semua lima tingkatan jaringan.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Order Grid Columns Menggunakan Nomor Order di Bootstrap 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa style custom untuk mempercantik contoh*/
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    .col{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col order-4"> Pertama, tapi akhirnya dipesan </div>
            <div class="col"> Kedua, tapi dipesan pada awalnya </div>
            <div class="col order-1"> Terakhir, tapi dipesan pada detik </div>
        </div>
    </div>
</body>
</html>

Mengimbangi Kolom Grid

Anda juga dapat memindahkan kolom kisi ke kanan untuk tujuan penyelarasan menggunakan class offset kolom seperti .offset-sm-*, .offset-md-*, .offset-lg-*, dan seterusnya.

Class-class ini mengimbangi kolom dengan hanya meningkatkan margin kirinya dengan jumlah kolom tertentu.

Misalnya, class .offset-md-4 pada kolom .col-md-8 memindahkannya ke kanan di atas empat kolom dari posisi aslinya.

Coba contoh berikut untuk melihat cara kerjanya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Pengaturan Bootstrap 4 Columns Off </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa style custom untuk mempercantik contoh */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        background: #dbdfe5;
        margin-bottom: 10px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
<div class="container mt-3">
    <div class="row">
        <div class="col-md-4">
            <div class="demo-content">.col-md-4</div>
        </div>
        <div class="col-md-8">
            <div class="demo-content bg-alt">.col-md-8</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 offset-md-4">
            <div class="demo-content bg-alt">.col-md-8 .offset-md-4</div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-3">
            <div class="demo-content">.col-md-3</div>
        </div>
        <div class="col-md-9">
            <div class="demo-content bg-alt">.col-md-9</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="demo-content bg-alt">.col-md-6 .offset-md-3</div>
        </div>
        <div class="col-md-3">
            <div class="demo-content">.col-md-3</div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-3">
            <div class="demo-content">.col-md-3</div>
        </div>
        <div class="col-md-3">
            <div class="demo-content bg-alt">.col-md-3</div>
        </div>
        <div class="col-md-3">
            <div class="demo-content">.col-md-3</div>
        </div>
        <div class="col-md-3">
            <div class="demo-content bg-alt">.col-md-3</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 offset-md-3">
            <div class="demo-content bg-alt">.col-md-3 .offset-md-3</div>
        </div>
        <div class="col-md-3 offset-md-3">
            <div class="demo-content">.col-md-3 .offset-md-3</div>
        </div>
    </div>
</div>
</body>
</html>

Anda juga dapat mengimbangi kolom menggunakan class utilitas margin. Class-class ini berguna dalam situasi di mana lebar offset tidak tetap.

Berikut contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Bootstrap 4 Kolom Mengimbangi Menggunakan Margin Utilities</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Beberapa style custom untuk mempercantik contoh */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        background: #dbdfe5;
        margin-bottom: 10px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
<div class="container mt-3">
    <div class="row">
        <div class="col-md-4">
            <div class="demo-content">.col-md-4</div>
        </div>
        <div class="col-md-4 ml-auto">
            <div class="demo-content bg-alt">.col-md-4 .ml-auto</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 ml-md-auto">
            <div class="demo-content">.col-md-3 .ml-auto</div>
        </div>
        <div class="col-md-3 ml-md-auto">
            <div class="demo-content bg-alt">.col-md-3 .ml-auto</div>
        </div>
    </div>
    <div class="row">
        <div class="col-auto mr-auto">
            <div class="demo-content">.col-auto .mr-auto</div>                    
        </div>
        <div class="col-auto">
            <div class="demo-content bg-alt">.col-auto</div>
        </div>                
    </div>
</div>
</body>
</html>

Catatan: Anda dapat menggunakan class .col-auto untuk membuat kolom yang hanya memakan ruang sebanyak yang dibutuhkan, yaitu ukuran kolom itu sendiri berdasarkan konten.

Membuat Kolom Ringkas

Anda dapat menghapus gutter default antar kolom untuk membuat tata letak yang ringkas dengan menambahkan class .no-gutters di .row.

Class ini menghapus margin negatif dari baris dan padding horizontal dari semua kolom turunan langsung.

Berikut contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Bootstrap 4 Kolom Ringkas </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
	/* Beberapa style custom untuk mempercantik contoh*/
    .demo-content{
        padding: 15px;
        font-size: 18px;
        min-height: 50px;
        background: #dbdfe5;
        margin-bottom: 15px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
    <h2 class="text-center"> Kolom dengan Gutter</h2>
    <div class="container mt-3">
        <div class="row">
            <div class="col-4">
                <div class="demo-content">.col-4</div>
            </div>
            <div class="col-4">
                <div class="demo-content bg-alt">.col-4</div>
            </div>
            <div class="col-4">
                <div class="demo-content">.col-4</div>
            </div>
        </div>
    </div>
    <hr>
    <h2 class="text-center"> Kolom tanpa Gutter</h2>
    <div class="container mt-3">
        <div class="row no-gutters">
            <div class="col-4">
                <div class="demo-content">.col-4</div>
            </div>
            <div class="col-4">
                <div class="demo-content bg-alt">.col-4</div>
            </div>
            <div class="col-4">
                <div class="demo-content">.col-4</div>
            </div>
        </div>
    </div>
</body>
</html>

Memecah Kolom ke Baris Baru

Anda juga dapat membuat kolom dengan lebar sama yang menjangkau beberapa baris dengan menyisipkan class <div> dengan .w-100 di mana Anda ingin kolom tersebut beralih ke baris baru.

Selain itu, Anda dapat membuat jeda ini menjadi responsif dengan menggabungkan class .w-100 dengan class utilitas tampilan responsif.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Memecah Kolom ke Garis Baru </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
	/* Beberapa style custom untuk mempercantik contoh */
    .row{     
        margin-top: 1rem;
        background: #dbdfe5;
    }
    [class^=col]{
        padding: 10px 15px;
        background: #abb1b8;
        border: 1px solid rgba(0,0,0,0.5)
    }
</style>
</head>
<body>
    <div class="container">
        <h4 class="mt-3"> Memecah kolom di semua perangkat </h4>
        <div class="row">
            <div class="col">.col</div>
            <div class="col">.col</div>
            <div class="w-100"></div>
            <div class="col">.col</div>
            <div class="col">.col</div>
        </div>
        <h4 class="mt-3"> Memecah kolom di semua perangkat kecuali perangkat ekstra besar </h4>
        <div class="row">
            <div class="col">.col</div>
            <div class="col">.col</div>
            <div class="w-100 d-xl-none"></div>
            <div class="col">.col</div>
            <div class="col">.col</div>
        </div>
        <p class="mt-3"> Ubah ukuran jendela browser untuk memahami cara kerjanya.</p>
    </div>    
</body>
</html>

Semoga tutorial ini membantu Anda, memahami dasar-dasar sistem grid Bootstrap yang baru.

Dalam beberapa tutorial berikutnya Anda akan belajar bagaimana membuat tata letak halaman web dasar menggunakan sistem grid flexbox.

Tutorial Belajar Bootstrap Bagian 2 : Memahami Grid System di Bootsrap

Apa itu Bootstrap Grid System

Terimakasih!

Membuat Tata Letak 2 Kolom

Membuat Tata Letak 3 Kolom

Kolom Tata Letak Otomatis Bootstrap

Wrapping Kolom Behaviour

Membuat Tata Letak Multi-Kolom dengan Bootstrap

Penyusunan Kolom Grid

Membuat Variabel Lebar Kolom

Perataan Kolom Grid

Perataan Vertikal Kolom Kisi

Perataan Horizontal Kolom Grid

Penyusunan Ulang Kolom Grid

Mengimbangi Kolom Grid

Membuat Kolom Ringkas

Memecah Kolom ke Baris Baru

TINGGALKAN KOMENTAR Batal membalas

Artikel Lainnya

25 Cara Meningkatkan Penjualan Dengan Menggunakan Bukti Sosial

Cara Membuat Hak Akses Root Dengan Sudo

Apakah Sinyal WiFi Bisa Merusak Kesehatan ?

Tutorial Belajar HTML5 Bagian 20 : Cara Membuat Kode Javascript di...

JavaScript DOM Bagian 5 : Cara Menggunakan getElementsByClassName di JavaScript

Tutorial Belajar Microsoft Word Bagian 1 : Mengenal Bagian di Microsoft...

101 Teknik Copywriting Lengkap : Cara Membuat Tulisan Yang Bisa Menjual...

Tutorial Belajar JavaScript Bagian 1 : Pengenalan JavaScript

Tutorial Belajar CSS Bagian 40 : Cara Menggunakan Property Font-Size di...

Tutorial Belajar HTML5 Bagian 17 : Cara Membuat Formulir di HTML

PILIHAN EDITOR

Kapan Waktu Terbaik Posting di Instagram ?

4 Fakta Cara Menghasilkan Uang Online Yang Tidak Anda Ketahui

Cara Menemukan Ponsel Android yang Hilang Tanpa Aplikasi Pelacak

ARTIKEL POPULER

18 Cara Menulis Judul Artikel Yang Mengundang Ribuan Klik dan Share

Cara Merubah Bahasa Woocommerce Ke Bahasa Indonesia

Panduan Lengkap : Cara Menggunakan Mailchimp Untuk Email Marketing

KATEGORI POPULER

TENTANG KAMI

IKUTI KAMI