Bootstrap Flex Playground
Bangun tata letak flex Bootstrap 5.3 secara visual dan salin kelas utilitas yang persis — d-flex, justify-content, align-items, order, grow, dan lainnya.
—
Semuanya berjalan di peramban 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 Flex Playground
Bootstrap Flex Playground memungkinkan Anda membangun layout flexbox dengan class utility Bootstrap 5.3 yang sesungguhnya, bukan CSS mentah. Konfigurasikan container — direction, wrapping, justify-content, align-items, gap — dengan kontrol tersegmentasi, klik item mana pun untuk mengatur align-self, order, grow, dan shrink-nya sendiri, dan lihat pratinjau langsung menyusun ulang seketika.
Pengalih breakpoint adalah yang membuatnya lebih dari sekadar mainan: pilih sm, md, lg, xl, atau xxl dan class yang Anda atur dari titik itu mendapatkan infiks responsif — justify-content-md-between, flex-lg-row — persis seperti sistem mobile-first Bootstrap menerapkannya dari breakpoint tersebut ke atas. Tambahkan hingga 12 item untuk mensimulasikan komponen yang realistis.
Saat layoutnya sudah terlihat pas, salin HTML yang dihasilkan atau cukup class container-nya dan tempelkan langsung ke proyek Anda. Semuanya berjalan di browser Anda dan tidak ada yang diunggah.
Cara menggunakan Bootstrap Flex Playground
- Atur utility container — direction, wrap, justify-content, align-items, dan gap — dengan kontrol tersegmentasi.
- Tambah atau hapus item (2 hingga 12) agar sesuai dengan komponen nyata Anda.
- Klik sebuah item untuk memberinya utility align-self, order, atau ukuran flex sendiri.
- Ganti breakpoint untuk menambahkan varian responsif yang berlaku dari sm, md, lg, xl, atau xxl ke atas.
- Periksa pratinjau langsung, lalu salin HTML yang dihasilkan atau class container-nya.