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 pada saat kita hanya ingin menggunakan ruang atau lebar yang kurang dari lebar kolom yang sudah di tentukan oleh framework kita harus mengcutomnya kembali. Pada bulma terdapat class yang memungkinkan kita melakukan hal tersebut. Dan pada tips kali ini saya akan mencoba membagi tips Cara Menggunakan Narrow Kolom Pada Bulma.

Narrow disini berfungsi untuk memudahkan kita mengubah ukuran kolom sesuai dengan kebutuhan kita. Langsung saja saya akan memberikan langkah-langkah Cara Menggunakan Narrow 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:

<!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 maka tampilannya akan menjadi seperti berikut:

Pada gambar diatas teman-teman bisa melihat perbedaan antara kolom yang belum kita beri class .is-narrow dan yang sudah di berikan. Kesimpulannya class .is-narrow untuk memudahkan kita mengubah ukuran kolom sesuai dengan kebutuhan kita.

Dengan bulma kita dapat dengan mudah memodifikasi kolom dengan memberikan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan menghapus jarak antar kolom pada bulma.

Sekian tips tentang Cara Menggunakan Narrow Kolom Pada Bulma. Semoga bermanfaat.