Bootstrap Grid Playground
Bangun tata letak grid Bootstrap 5.3 yang responsif secara visual dan salin kelas yang tepat — row, col, offset, urutan, gutter, dan perataan.
—
Semuanya berjalan di browser Anda — tidak ada yang diunggah.
Kelas yang Anda atur berlaku mulai dari breakpoint ini ke atas. Ganti breakpoint untuk membangun tata letak responsif.
Tentang Bootstrap Grid Playground
Bootstrap Grid Playground membangun layout baris dan kolom yang responsif dengan sistem grid Bootstrap 5.3 yang sesungguhnya. Tambahkan hingga 12 kolom ke sebuah baris, klik kolom mana pun untuk mengatur lebar, offset, dan urutannya, serta sesuaikan gutter dan perataan pada baris — pratinjau dan markup yang dihasilkan diperbarui langsung setiap kali ada perubahan.
Karena grid Bootstrap bersifat mobile-first, pengalih breakpoint menjadi sentral: atur sebuah kolom ke col-6 di dasar dan col-md-4 di md, dan Anda telah membangun pola klasik bertumpuk-di-mobile, tiga-berjajar-di-desktop tanpa menulis satu baris kode pun. Offset, order, dan class gutter semuanya menggunakan infiks responsif yang sama.
Hasilnya adalah HTML siap salin-tempel yang bersih — sebuah div baris dengan kolom anaknya dan tepat class yang Anda konfigurasikan. Salin seluruh potongan kode atau cukup class baris-nya; semuanya berjalan secara lokal di browser Anda.
Cara menggunakan Bootstrap Grid Playground
- Tambahkan kolom ke baris — hingga 12 — dan klik salah satu untuk memilihnya.
- Atur span, offset, dan order kolom yang dipilih untuk breakpoint saat ini.
- Ganti breakpoint (sm hingga xxl) untuk menentukan bagaimana layout menyusun ulang di layar yang lebih besar.
- Sesuaikan gutter baris dan utility perataannya.
- Tinjau pratinjau langsung, lalu salin HTML yang dihasilkan atau class baris-nya.