Sistem Grid pada Bootstrap https://www.mahadisuta.

com/artikel/sistem-grid-pada-bootstrap

 +6281 911 911 301

Artikel / Sistem Grid pada Bootstrap

Sistem Grid pada Bootstrap


1 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

Bootstrap adalah salah satu framework css dan js yang digunakan untuk
membuat tampilan website yang responsive dengan berbagai ukuran resolusi
perangkat yang berbeda. Dengan menggunakan css dan js dari bootstrap,
maka anda dapat membuat tampilan standar website mulai dari form, label,
navbar, dan masih banyak lagi dimana semua tampilan sudah responsive
dengan resolusi perangkat anda.

Di dalam framework Bootstrap terdapat sistem grid yang digunakan untuk

mengatur tampilan sesuai dengan ukuran layar dari perangkat yang digunakan
dengan mudah dan cepat.

2 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

Pada artikel ini saya akan membahas khusus mengenai sistem grid pada
Bootstrap yang disesuaikan dengan beberapa kasus yang ada. Di awal artikel
saya akan memperkenalkan beberapa class yang digunakan pada sistem grid
disertakan dengan aturan dasar dari masing-masing class. Setelah mengenal
class dasar pada sistem grid, materi akan saya lanjutkan ke beberapa contoh
penerapan sistem grid.

Pengenalan class untuk sistem grid

Bootstrap
Di dalam sistem grid Bootstrap terdapat beberapa class yang digunakan untuk
mengatur tampilan sesuai dengan kasus yang ada. Berikut penjelasan dari
masing-masing class untuk sistem grid  Bootstrap.

3 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

Class Containers
Class containers adalah class terluar dari sebuah elemen konten, dimana class
ini akan mengatur lebar konten sesuai dengan class yang digunakan. Di dalam
framework Bootstrap terdapat dua jenis containers yaitu .container dan
.container-fluid. Berikut adalah penjelasan dari masing-masing class
containers yang ada.

1. Class Container
Class container atau .container memiliki ukuran fixed width atau lebar
disesuaikan dengan ukuran yang telah ditentukan atau fix. Maksimal lebar
kontainer untuk class ini yaitu 1170px. Beberapa aturan dari .container
berdasarkan resolusi perangkat yaitu: (1) Untuk resolusi layar lebih besar
atau sama dengan 1200px memiliki lebar kontainer sebesar 1170px, (2)
untuk resolusi layar lebih besar atau sama dengan 992px memiliki lebar
kontainer sebesar 970px, (3) untuk resolusi layar lebih besar atau sama
dengan 768px memiliki lebar kontainer sebesar 750px, dan (4) untuk
resolusi layar lebih kecil dari 768px memiliki lebar kontainer sesuai dengan 
4 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

resolusi layar (auto).

Penerapan dari .container yaitu sebagai berikut:

<div class="container">
...
</div>

2. Class Container Fluid

Class container fluid atau .container-fluid memiliki ukuran lebar kontainer
memenuhi lebar layar (full width). Dengan menggunakan class ini maka
kontainer yang anda buat akan memenuli ukuran layar dari semua
perangkat yang anda gunakan.
Penerapan dari .container-fluid yaitu senagai berikut:

<div class="container-fluid">
...
</div>

Class Row dan Columns

Class ini digunakan untuk mengatur ukuran layar dengan membagi setiap
bagian konten menjadi 12 kolom. Class ini adalah class yang menjadi inti dari
grid sistem dari Bootstrap. Adapun aturan yang perlu diketahui untuk grid
sistem Bootstrap yaitu sebagai berikut:
1. .row harus diletakkan diantara .container atau .container-fluid untuk
keselarasan aligment dan padding.
2. Gunakan .row untuk membuat grup horizontal dari setiap kolom (.col-*-*). 
5 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

3. Konten harus diletakkan diantara kolom dan hanya kolom yang

memungkinkan untuk membuat anak dari .row.
4. Class grid yang telah ditentukan seperti .row dan .col-xs-* tersedia untuk
mempercepat pembuatan grid layouts.
5. Class columns akan membuat batas antara kolom dan konten dengan
menggunakan padding. Penggunaan margin negatif pada .row akan
membuat .row sejajar dengan kolom yang mempunyai batas padding.
6. Grid columns dibuat dengan menentukan nomor dari 12 kolom yang
tersedia. Seperti contoh: untuk membuat tiga kolom yang sama pada satu
baris maka harus membuat tiga .col-xs-4. Cara untuk menentukan nomor
dari kolom yaitu dengan membagi 12 kolom yang tersedia dengan jumlah
kolom yang diinginkan.
7. Jika dalam .row memiliki lebih dari 12 kolom maka akan diletakkan pada
baris baru yang sebenarnya merupakan satu kesatuan.
8. Class grid berlaku untuk perangkat dengan resolusi lebih besar atau sama
dengan ukuran breakpoint dan akan menimpa class grid yang ditargetkan
pada perangkat dengan resolusi yang lebih kecil. Menggunakan .col-md-*
untuk elemen tidak hanya berpengaruh untuk ukuran medium namun
juga akan berpengaruh untuk ukuran layar yang lebih besar jika .col-lg-*
tidak direpresentasikan.


6 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

Pembagian kolom dalam setiap baris dapat diatur sesuai dengan ukuran layar
yang ditargetkan. Untuk setiap resolusi yang ditetapkan bootstrap memiliki
class prefix yang digunakan sebagai pembagi baris di setiap resolusi perangkat.
Adapun class prefix yang dimaksud yaitu:

.col-xs-* merupakan class prefix yang digunakan untuk membagi baris

pada ukuran kurang dari 768px atau ekstra small.
.col-sm-* merupakan class prefix yang digunakan untuk membagi baris
pada ukuran lebih besar atau sama dengan 768px atau small.
.col-md-* merupakan class prefix yang digunakan untuk membagi baris
pada ukuran lebih besar atau sama dengan 992px atau medium.
.col-lg-* merupakan class prefix yang digunakan untuk membagi baris
pada ukuran lebih besar atau sama dengan 1200px atau large.

Penerapan sistem grid Bootstrap

Setelah memahami dasar dan aturan dari penerapan sistem grid pada
Bootstrap, maka selanjutnya materi akan dilanjutkan pada bagian implementasi 
7 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

sistem grid sesui dengan kasus yang ada.

Berikut beberpa kasus dari penerapan sistem grid dari yang sederhana sampai
dengan yang lebih kompleks.

1. Kasus pertama yaitu membagi baris menjadi 3 kolom dengan ukuran

kolom yang sama pada resolusi Kasus ini dapat diselesaikan dengan
mengingat beberapa aturan yang ada yaitu .row harus ada diantara
.container atau .container-fluid, .row maksimal berisikan 12 kolom, dan jika
ingin membagi .row menjadi ukuran yang sama maka harus membagi 12
kolom dengan jumlah kolom yang ingin dibuat. Sesuai dengan kasus ini,
maka kita harus membagi 12 kolom dengan 3 kolom sehingga
menghasilkan nilai 4. Penerapan untuk kasus ini yaitu membuat .col-md-4
sebanyak 3 kali. Berikut kode lengkap untuk kasus ini.

<div class="container">
<div class="row">
<div class="col-md-4">Kolom 1</div>
<div class="col-md-4">Kolom 2</div>
<div class="col-md-4">Kolom 3</div>
</div>
</div>

2. Kasus ke dua yaitu penerapan pembagian kolom berdasarkan resolusi

layar, dalam kasus ini terdapat 6 kolom yang akan dibagi sesuai dengan
ukuran layar. Pada ukuran besar akan dibagi menjadi 6 bagian, pada
ukuran medium akan dibagi menjadi 3 bagian, pada ukuran kecil akan
dibagi menjadi 2 bagian, dan pada ukuran sangat kecil akan dibagi
menjadi 1 bagian. Penyelesaian kasus ini dapat dilakukan dengan

8 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

melakukan kombinasi class prefix dari kolom. Berikut bait kode

penyelesaian untuk kasus ini.

<div class="container">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 1</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 2</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 3</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 4</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 5</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 6</div>
</div>
</div>

3. Kasus selanjutnya yaitu membuat anak class row, dalam kasus ini akan ada
2 kolom pada resolusi medium yang masing-masing kolom dibagi menjadi
tiga bagian yang lebih kecil. Berikut bait kode untuk penyelesaian kasus
ini.


9 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

<div class="container">
<div class="row">
<div class="col-md-6">
<div clas="row"
<div class="col-md-4">Kolom 1 Anak Kolom 1</div>
<div class="col-md-4">Kolom 1 Anak Kolom 2</div>
<div class="col-md-4">Kolom 1 Anak Kolom 3</div>
</div>
</div>
<div class="col-md-6">
<div clas="row"
<div class="col-md-4">Kolom 2 Anak Kolom 1</div>
<div class="col-md-4">Kolom 2 Anak Kolom 2</div>
<div class="col-md-4">Kolom 2 Anak Kolom 3</div>
</div>
</div>
</div>
</div>

Demikian artikel tentang sistem grid pada Bootstrap, semoga artikel ini dapat
mempermudah dan membantu anda dalam mempelajari sistem grid dari
Bootstrap.


10 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

0 Comments Sort by Newest

Add a comment...

Facebook Comments plugin

Artikel Terkait

Dipublikasikan

1 Oct 2017

Solusi Tinymce Tidak Dapat

Menampilkan Sourcecode Di
Tag Pre
Artikel ini akan memberikan solusi
tidak munculnya code di tag pre yang 
11 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

dimiliki plugin tynimce.

Selengkapnya

Dipublikasikan

30 Sep 2017

CopyrightTutorial
Memasang Widget
& Design Bali 2015 - 2021
Aplikasi Chating Populer di
Website Anda
Anda pelaku usaha yang
menggunakan website sebagai media
promosi? anda dapat memakai widget
ini untuk menghubungkan anda
dengan pelanggan.

Dipublikasikan Dipublikasikan

8 Oct 2017 16 Jan 2018

Membuat Templit HTML pada Cara Mempercepat Index dan

Framework Codeigniter Reindex Google Terhadap 
12 of 13 1/31/2021, 2:05 PM
Sistem Grid pada Bootstrap https://www.mahadisuta.com/artikel/sistem-grid-pada-bootstrap

Membuat templit html pada Artikel atau Blog

CodeIgniter akan mempersimpel
Mempercepat index artikel atau
coding website anda dan sekaligus
website oleh Google adalah tahap
mempermudah anda dalam
awal untuk mendapatkan
memanajemen halaman.
perengkingan artikel atau web.

Selengkapnya Selengkapnya


13 of 13 1/31/2021, 2:05 PM