Contoh Grid Bootstrap
Di bawah ini kami telah mengumpulkan beberapa contoh tata letak grid Bootstrap dasar.
Tiga Kolom Sama
Contoh berikut menunjukkan cara mendapatkan tiga kolom dengan lebar yang sama mulai dari tablet dan menskalakan ke desktop besar. Di ponsel, kolom akan ditumpuk secara otomatis:
Contoh
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Tiga Kolom Tidak Sama
Contoh berikut menunjukkan cara mendapatkan tiga kolom dengan lebar berbeda mulai dari tablet dan penskalaan ke desktop besar:
Contoh
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Dua Kolom Tidak Sama
Contoh berikut menunjukkan cara mendapatkan dua kolom dengan lebar berbeda mulai dari tablet dan menskalakan ke desktop besar:
Contoh
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Tidak ada selokan
Gunakan .row-no-gutterskelas untuk menghapus talang dari baris dan kolomnya:
Contoh
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Dua Kolom Dengan Dua Kolom Bersarang
Contoh berikut menunjukkan cara mendapatkan dua kolom mulai dari tablet dan menskalakan ke desktop besar, dengan dua kolom lainnya (dengan lebar yang sama) di dalam kolom yang lebih besar (di ponsel, kolom ini dan kolom bertingkatnya akan ditumpuk):
Contoh
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Campuran: Seluler Dan Desktop
Sistem grid Bootstrap memiliki empat kelas: xs (ponsel), sm (tablet), md (desktop), dan lg (desktop yang lebih besar). Kelas dapat digabungkan untuk membuat tata letak yang lebih dinamis dan fleksibel.
Tip: Setiap kelas ditingkatkan, jadi jika Anda ingin mengatur lebar yang sama untuk xs dan sm, Anda hanya perlu menentukan xs.
Contoh
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Tip: Ingatlah bahwa kolom kisi harus berjumlah hingga dua belas untuk satu baris. Lebih dari itu, kolom akan ditumpuk terlepas dari viewport.
Campuran: Ponsel, Tablet, dan Desktop
Contoh
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Jelas Mengapung
Hapus float (dengan .clearfixkelas) pada breakpoint tertentu untuk mencegah pembungkus aneh dengan konten yang tidak rata:
Contoh
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Mengimbangi Kolom
Pindahkan kolom ke kanan menggunakan .col-md-offset-*kelas. Kelas-kelas ini meningkatkan margin kiri kolom dengan * kolom:
Contoh
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Dorong Dan Tarik - Ubah Urutan Kolom
Ubah urutan kolom kisi dengan .col-md-push-*dan
.col-md-pull-*kelas:
Contoh
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>