Sama dengan framework css lainnya yang dimana setiap kolom mempunyai ukuranya sendiri, begitupun dengan bulma. Bulma memiliki ukuran-ukuran yang mungkin memudahkan kita dalam membuat suatu kolom untuk menempatkan konten yang akan kita tampilkan di website kita. Pada tips dan trick kali ini saya akan membahas tentang Cara Merubah Ukuran Kolom di Bulma.

Bulma framework memiliki 12 grid atau kolom sama dengan bootstrap dimana setiap grid atau kolomnya mempunyai ukuran masing-masing yang membedakan hanya penulisan classnya kalau kita biasa menggunakan col-md-2 untuk membuat dua kolom jadi satu pada bootstrap maka di bulma kita harus menuliskannya seperti ini is-2 untuk membuat dua kolom jadi satu, pada bulma kita mempunyai ukuran khusus untuk merubah lebar kolom atau grid tersebut. Langsung saja saya akan memberikan langkah-langkah Cara Merubah Ukuran Kolom di Bulma:

– Pertama, anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.

– Kedua, anda ketikan kode html di bawah ini:

Untuk Penjelasan kode html-nya saya sudah berikan commenting pada kode di atas. Setelah selesai coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:

Cara Merubah Ukuran Kolom di Bulma

– Ketiga, Kita ganti kelas pada kolom ke dua menjadi .is-half dan kelas pada kolom ketiga kita hapus jadi hanya tinggal column saja:

Silahkan teman-teman refresh browsernya maka ukuran kolomnya akan berubah sesuai kelas yang telah kita ganti tadi:

Cara Merubah Ukuran Kolom di Bulma

Berikut adalah beberapa kelas yang bisa teman-teman gunakan di bulma untuk merubah ukuran kolom:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter

Dengan bulma kita dapat dengan mudah merubah ukuran kolom sesusai keinginan kita dan tentunya dengan kelas yang telah bulma sediakan. Bagaimana teman-teman cukup mudahkan merubah ukuran kolom pada bulma.

Sekian tips dan trick tentang Cara Merubah Ukuran Kolom di Bulma. Semoga bermanfaat.