Pada kesempatan kali ini saya menjelaskan cara membuat grid di Bootstrap. apa itu bootstrap ? mungkin ada sebagian teman-teman yang sudah mengetahui framework css yang sedang populer dan banyak di gunakan oleh web developer seperti FrontEnd dan BackEnd Developer . Bahkan terhitung hampir 100% web developer menggunakan framework css yang satu ini, di karenakan pengaksesan nya yang tidak terlalu rumit, teman-teman hanya perlu memasang script bootstrap.min.css dan untuk js nya hanya bootstrap.min.js. Lalu apa itu grid ? .

Bootstrap menyediakan fasilitas layouting konten web dengan Sistem Grid, cara kerjanya hampir mirip seperti penggunaan <table> pada html, dengan menggunakan sistem grid tersebut pembuatan struktur konten jadi lebih rapih dan mudah di atur atau di tata. Untuk cara menggunakan nya teman-teman hanya perlu menyertakan atribut class pada suatu div yang ingin di buat.

Pada sistem grid bootstrap tersebut harus memenuhi syarat yaitu grid tidak boleh melebihi dari 12 grid,dan jumlah grid yang ingin di buat harus di perhitungkan dengan pembagian 12:(jumlah grid yang mau dibuat).

Setelah teman-teman mengetahui bagaimana sistem grid bootstrap yang di perbolehkan, hal yang harus teman-teman lakukan pertama adalah memasang master file nya terlebih dahulu yaitu bootstrap.min.css.

Berikut bagianbagian atribut yang sudah di sediakan oleh bootstrap berikut ini :

  • xs ( Extra small devices [Hape] )
    Untuk target device dengan resolusi < 768px dan maksimal lebar div container yang di ijinkan tidak ada (auto) dan Maksimal lebar kolom yang diijinkan tidak ada (auto)
  • sm ( Small devices [Tablet] )
    Untuk target device dengan resolusi >=768px dan maksimal lebar div container yang di ijinkan 750px dan maksimal lebar kolom yang diijinkan 60px
  • md ( Medium devices [Desktop] )
    Untuk target device dengan resolusi >=992px dan maksimal lebar div container yang diijinkan 970px dan maksimal lebar kolom yang diijinkan 78px
  • lg ( Large devices [Desktop] )
    Untuk target device dengan resolusi >=1200px dan maksimal lebar div container yang diijinkan 1170px dan maksimal lebar kolom yang diijinkan 95px

Pada contoh ini, saya akan gunakan atribut md untuk desktop standar. Dan untuk melihat lebar setiap kolom dengan lebar yang berbeda – beda, teman-teman bisa ketikan kode seperti berikut pada file html teman-teman.

Berikut Kodenya :

Untuk selanjutnya bisa teman-teman sesuaikan sesuai kebutuhan dan kreatifitas teman-teman.

Sampai di sini penjelasan saya mengenai cara membuat grid di Bootstrap, semoga bermanfaat.