Merubah Ukuran Hero di Bulma Framework

Ukuran pada hero di bulma bisa kita ubah sesuai keinginan kita, nah sebelum memulai tips dan trick kali ini teman-teman terlebih dahulu baca pembahasan tentang Fungsi Dari Class Hero di Bulma Framework pada artikel saya sebelumnya. Kalau sudah membaca artikel saya sebelumnya maka teman-teman bisa melanjutkan membaca tips dan trick dari saya kali ini tentang Merubah Ukuran Hero di Bulma Framework.

Di dalam bulma kita bisa merubah ukuran hanya dengan menambahkan class yang sudah disediakan, sekarang kita akan mencoba menambahkannya dalam class hero, berikut langkah-langkah untuk mencoba Merubah Ukuran Hero di Bulma Framework:

1. Pertama

Buka file html yang telah teman-teman buat pada artikel sebelumnya tentang Fungsi Dari Class Hero di Bulma Framework.

2. Kedua

anda duplikat kode html heronya yang sudah ada sebanyak 2 buah lalu ganti class yang berada di section-nya dengan class lain, seperti kode di bawah ini:

<!DOCTYPE html>
<html>
<head>
  <title>Hero Bulma</title>
  <!--link ke css bulma-->
  <link rel="stylesheet" type="text/css" href="bulma-0.5.0/css/bulma.css">
  <link rel="stylesheet" type="text/css" href="bulma-0.5.0/css/bulma.css.map">
  <!--link ke font-awesome-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<section class="hero is-medium is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        DUMET School
      </h1>
      <h2 class="subtitle">
        Website and Digital Marketing Courses
      </h2>
      <h3 class="subtitle">Hero is-medium</h3>
    </div>
  </div>
</section>

<section class="hero is-large is-info">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        DUMET School
      </h1>
      <h2 class="subtitle">
        Website and Digital Marketing Courses
      </h2>
      <h3 class="subtitle">Hero is-large</h3>
    </div>
  </div>
</section>

<section class="hero is-fullheight is-success">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        DUMET School
      </h1>
      <h2 class="subtitle">
        Website and Digital Marketing Courses
      </h2>
      <h3 class="subtitle">Hero is-fullheight</h3>
    </div>
  </div>
</section>


</body>
</html>

Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:

is-medium : Ukuran sedang

is-large : Ukuran besar

is-fullheight : Ukuran Sangat besar atau full menutupi satu layar

Nah, dari gambar dia atas teman-teman bisa memilih class apa yang akan teman-teman gunakan untuk merubah ukuran hero itu sendiri.

Class hero adalah class yang memudahkan kita membuat suatu kotak besar dan class is-medium, is-large, is-fullheight dan yang lainnya yang sudah dijelaskan di atas membuat ukuran hero bisa berubah sesuai keinginan kita.

Dengan bulma kita dapat dengan mudah merubah ukuran tentunya dengan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan merubah ukuran pada class hero di bulma.

Sekian pembahasan kali ini tentang Merubah Ukuran Hero di Bulma Framework. Semoga bermanfaat.

Merubah Ukuran Hero di Bulma Framework

Kategori