Bootstrap - Belajar Sistem Grid Bootstrap

Bootstrap termasuk sistem responsif, sistem grid yang mendukung perangkat mobile pertama dengan tepat mengatur skala layarnya dan juga memiliki grid sistem hingga 12 kolom sebagai ukuran perangkat atau viewport.

Pertama kali saya mendengar nama bootstrap juga karena sistem gridnya yang awesome. Sistem grid pada bootstrap ini sanga perfect menurut saya, mereka (red: Grid) bisa menyesuaikan ukurannya masing dari setiap layar yang mengaksesnya.

Sistem grid pada bootstrap bisa anda bagi menjadi berjumlah 12 grid / 12 kolom dalam satu dalaman web dekstop, yang mana grid ini nanti bisa menyesuaikan lebarnya masing-masing. Sebelum mengenal lebih jauh tentang Grid Sistem dari grid terlebih dahulu kita mengenal pembagian kategori grid, berikut kategori pada grid :

• 1. col-xs-*
• 2. col-sm-*
• 3. col-md-*
• 4. col-lg-*

Penjelasan Grid

Dari beberapa pilihan di atas tentu anda bingung untuk menentukan grid mana yang anda pakai untuk website anda nanti, dan saya memberikan sedikit penjelasan sebagai mana 4 point Grid System Bootstrap tersebut.

1. col-xs-*

Yang di maksud dari xs adalah Ekstra Small Device yaitu grid yang di peruntukkan untuk ukuran ponsel yang layarnya kurang dari 768px. Biasanya dipakai untuk pengembangan situs khusus ponsel.

2. col-sm-*

Yang di maksud dari sm adalah Small Device yaitu pada pilihan grid ini pengguna bisa memakainya untuk pengembangan website yang lebih sama dengan 768px biasanya ukuran layar segitu untuk Tablets.

3. col-md-*

col-md adalah Medium Device, Grid ini adalah grid yang saya sukai karena lebar sistem grid ini lebih dari 992px tidak kekecilan dan tidak kebesaran untuk perangkat komputer kita atau pengembangan website yang mencakup mobile dan dekstop.

4. col-lg-*

Yang dimaksud dari lg adalah Large Device, Grid ini bisa support untuk layar lebih dari 1200px sehingga layar yang mengakses website anda ukurannya lebih dari 1200px akan merasa website anda tidak kekecilan.

Sistem Grid Bootstrap ini support untuk semua lebar layar pengakses tetapi hanya saja pembagian 12 kolomnya berbeda, Sebagai contoh anda bisa copy script berikut ini.

Grid Sistem

<!-- perbedaan grid --> <!-- grid col-xs --> <div class="row">
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
</div>

<!-- grid col-sm --> <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>

<!-- grid col-md --> <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

<!-- grid col-lg --> <div class="row">
  <div class="col-lg-4">.col-lg-4</div>
  <div class="col-lg-4">.col-lg-4</div>
  <div class="col-lg-4">.col-lg-4</div>
</div>

Untuk contohnya anda bisa lihat di bawah ini :

.col-xs-4

.col-xs-4

.col-xs-4

.col-sm-4

.col-sm-4

.col-sm-4

.col-md-4

.col-md-4

.col-md-4

.col-lg-4

.col-lg-4

.col-lg-4

Dari script di atas sekarang anda coba perkecil browser anda jika anda non-dekstop maaf gridnya mungkin tidak keliatan :), lihatlah grid untuk sm masih suppurt walaupun browser anda sudah anda perkecil secara maksimal.

Sekian artikel bootstrap tutorial saya tentang Bootstrap - Belajar Sistem Grid Bootstrap anda juga bisa membaca artikel lainnya di sini, semoga artikel ini dapat bermanfaat. Jangan lupa share ke teman-teman dan jika ada kesulitan dalam penerapannya jangan sungkan untuk bertanya di kolom komentar. Terima Kasih dan Salam