Utilitas untuk tata letak
Untuk pengembangan ramah seluler dan responsif yang lebih cepat, Bootstrap menyertakan lusinan kelas utilitas untuk menampilkan, menyembunyikan, menyelaraskan, dan mengatur jarak konten.
Gunakan utilitas tampilan kami untuk mengubah nilai umum displayproperti secara responsif. Campurkan dengan sistem grid, konten, atau komponen kami untuk menampilkan atau menyembunyikannya di area pandang tertentu.
Bootstrap 4 dibuat dengan flexbox, tetapi tidak setiap elemen displaytelah diubah display: flexkarena ini akan menambahkan banyak penggantian yang tidak perlu dan secara tidak terduga mengubah perilaku browser utama. Sebagian besar komponen kami dibuat dengan flexbox diaktifkan.
Jika Anda perlu menambahkan display: flexke elemen, lakukan dengan .d-flexatau salah satu varian responsif (mis., .d-sm-flex). Anda memerlukan kelas atau nilai ini untuk memungkinkan penggunaan utilitas flexboxdisplay ekstra kami untuk ukuran, perataan, penspasian, dan banyak lagi.
Gunakan utilitasmargin dan spasi untuk mengontrol bagaimana elemen dan komponen diberi jarak dan ukuran. Bootstrap 4 menyertakan skala lima tingkat untuk utilitas spasi, berdasarkan variabel default nilai . Pilih nilai untuk semua area pandang (misalnya, untuk ), atau pilih varian responsif untuk menargetkan area pandang tertentu (misalnya, untuk memulai dari titik henti sementara).padding 1rem$spacer.mr-3margin-right: 1rem.mr-md-3margin-right: 1remmd
Saat beralih displaytidak diperlukan, Anda dapat mengaktifkan visibilityelemen dengan utilitas visibilitas kami . Elemen yang tidak terlihat akan tetap memengaruhi tata letak halaman, tetapi tersembunyi secara visual dari pengunjung.