Nesting Kolom Pada Bulma Framework

Nesting kolom adalah pembuatan kolom di dalam kolom. Dimana teman-teman bisa membuat beberapa kolom di dalam kolom tersebut. Tidak jauh berbeda dengan bootstrap bulma juga memiliki sistem grid. Kali ini saya akan membahas tentang Nesting Kolom Pada Bulma Framework.

Terkadang teman-teman kewalahan dalam membuat sautu kolom yang bersarng di dalam kolom, sekarang teman-teman tidak usah bingung karena dengan bulma framework semua menjadi mudah. Ok, langsung saja saya akan mencoba memberikan contoh tentang Nesting Kolom Pada Bulma Framework:

– 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>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"><!--sebagai pembungkus utama-->
  <div class="column"><!--sebagai pembungkus kolom baru-->
    <p class="notification is-warning">First column</p>
    <div class="columns">
      <!--kolom baru di bagi menjadi dua maka ukurannya masing-masing sebesar 6 kolom-->
      <div class="column">
        <p class="notification is-warning">First nested column</p>
      </div>
      <div class="column">
        <p class="notification is-warning">Second nested column</p>
      </div>
    </div>
  </div>
  <div class="column"><!--sebagai pembungkus kolom baru-->
    <p class="notification is-success">Second column</p>
    <div class="columns">
      <div class="column is-half"><!--kolom ini mempunya lebar 6 kolom-->
        <p class="notification is-success">50%</p>
      </div>
      <div class="column">
        <p class="notification is-success">Auto</p><!--kolom auto ini akan menyesuaikan kolom yang tersisa-->
      </div>
      <div class="column">
        <p class="notification is-success">Auto</p><!--kolom auto ini akan menyesuaikan kolom yang tersisa-->
      </div>
    </div>
   </div>
</div>


</body>
</html>

Untuk penjelasan tentang nesting terdapat pada kode html di atas yang saya sudah berikan commenting. Setelah selesai coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:

Kita lihat gambar diatas dimana kita telah selesai membuat suatu kolom bersarang di kolom lainnya dengan menggunakan bulma framework. Hanya dengan membuat pembungkus kolomnya lagi maka kita bebas membuat kolom di dalam kolom.

Sekian Artikel tentang Nesting Kolom Pada Bulma Framework. Semoga bermanfaat.