Tidak jauh beda dengan bootstrap offsetting kolom pada bulma adalah proses memnggeser kolom ke kanan sebanyak yang kita inginkan namun dengan batasan dua belas kolom. Pada tutorial kali ini saya akan mencoba membahas tentang Cara Offseting Kolom pada Bulma.
Offseting sangat berguna dimana kita akan membuat kolom sebeanyak 1 kolom hanya pada bagian kanan saja tanpa bagian kiri dan tengah. Nah dengan menggunakan class is-offset-(jumlah kolom) pada bulma, kali ini saya akan memberikan langkah-langkah Cara Offseting Kolom pada 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <title>Offset Bulma Framework</title> <!--link ke css bulma--> <link rel="stylesheet" href="bulma-0.4.0/css/bulma.css"> <!--link ke font-awesome--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <br> <div class="columns is-mobile"> <div class="column is-half is-offset-one-quarter"> <p class="notification is-info">is-offset-one-quarter</p><!--menggeser ke kanan sebanyak 4 kolom dan ke kiri 4 kolom--> </div> </div> <div class="columns is-mobile"> <div class="column is-4 is-offset-8"><!--menggeser ke kanan sebanyak 8 kolom--> <p class="notification is-warning">is-4 is-offset-8</p> </div> </div> <div class="columns is-mobile"> <div class="column is-11 is-offset-1"><!--menggeser ke kanan sebanyak 1 kolom--> <p class="notification is-danger">is-11 is-offset-1</p> </div> </div> <div class="columns is-mobile"> <div class="column is-5 is-offset-7"><!--menggeser ke kanan sebanyak 5 kolom--> <p class="notification is-danger">is-5 is-offset-7</p> </div> </div> </body> </html> |
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:
Dengan bulma kita dapat membuat kolom sebesar 8 kolom namun posisinya berada di tengah adapan kita dapat menggeser sebanyak 8 kolom ke arah kanan dengan hanya memanggil class yag sudah disediakan oleh bulma.
Sekian Tutorial tentang Cara Offseting Kolom pada Bulma. Semoga bermanfaat.