Cara Menggunakan Narrow Kolom Pada Bulma
Kita ketahui bahwa di framework css masing-masing kolom otomatis mempunyai ukuran sendiri-sendiri tergantung kelas yang kita berikan. Jadi di ketika kita hanya ingin menggunakan ruang atau lebar yang kurang dari lebar kolom yang telah di tentukan oleh framework kita mesti mengcutomnya kembali. Di bulma terdapat class yang memungkinkan kita mengerjakan hal tersebut. Dan di tips kali ini saya akan mencoba membagi tips Cara Menggunakan Narrow Kolom Di Bulma.
Narrow disini berfungsi bagi mempermudah kita mengubah ukuran kolom sesuai dengan keperluan kita. Seketika saja saya akan memberikan strategi Cara Menggunakan Narrow Kolom Di Bulma:
– Pertama-tama, sahabat unduh file bulmanya di situs bulma itu sendiri dan tempatkan di folder project yang teman-teman bikin.
– Kedua, sahabat ketikan kode html di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Gapless 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>
<div class=column>
<div class=box>
<p class=title is-5>Kolom yang belum menggunakan kelas narrow</p>
<p class=subtitle>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<div class=column>
<div class=box>
<p class=title is-5>Fleksibel Kolom</p>
<p class=subtitle>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
<br>
<div class=columns>
<div class=column is-narrow>
<div class=box style=width: 200px;>
<p class=title is-5>Kolom dengan class Narrow</p>
<p class=subtitle>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<div class=column>
<div class=box>
<p class=title is-5>Fleksibel Kolom</p>
<p class=subtitle>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</body>
</html>
Coba teman-teman buka di browser teman-teman karenanya tampilannya akan menjadi seperti berikut:
Di gambar diatas teman-teman dapat melihat perbedaan antara kolom yang belum kita beri class .is-narrow dan yang telah di berikan. Kesimpulannya class .is-narrow bagi mempermudah kita mengubah ukuran kolom sesuai dengan keperluan kita.
Dengan bulma kita dapat dengan gampang memodifikasi kolom dengan memberikan class yang telah di sediakan oleh bulma. Bagaimana teman-teman lumayan mudahkan menghapus jarak antar kolom di bulma.
Demikian tips mengenai Cara Menggunakan Narrow Kolom Di Bulma. Semoga bermanfaat.
Sumber https://kursuswebsite.org
