Cara Mengatur Rata Teks pada Bulma

Dalam membuat suatu teks supaya terlihat rapih maka kita memerlukan fungsi unutk meratakan teks tersebut, seperti untuk meratakan teks hanya ke sebalah kiri saja atau bisa juga kanan dan tengah saja. Dan pada sebuah artikel pada website pasti akan terlihat bagus apabila kita menaruh fungsi rata teks tersebut, maka dari itu saya akan membagi tips dan trick Cara Mengatur Rata Teks pada Bulma.

Dalam tips dan trick kali ini saya akan membahas helper class pada bulma framework untuk meratakan sebuah teks pada website. Langsung saja saya akan memberikan langkah-langkah Cara Mengatur Rata Teks 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>RataTeks</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="column">
<h1 class="title is-1 has-text-centered">Macam-macam <b>class</b> untuk mengatur <b>align</b> pada text</h1>
  <div class="columns">
    <div class="column has-text-left">
      <div class="box notification is-danger">
        <p class="title is-4"><b>Rata Kiri</b></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 has-text-centered ">
      <div class="box notification is-warning">
        <p class="title is-4"><b>Rata Tengah</b></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 has-text-right">
      <div class="box notification is-success">
        <p class="title is-4"><b>Rata Kanan</b></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>
</div>

<br>
	
</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 satu dengan yang lainnya, kolom pertama dari kiri saya berikan class has-text-left sehingga akan membuat teks menjadi rata kiri, kolom kedua saya berikan class has-text-centered maka teks emnjadi rata tegah, lalu kolom terakhir saya berikan class has-text-right sehingga membuat teks menjadi rata kanan.

Dengan bulma kita dapat dengan mudah memodifikasi teks dengan memberikan helper class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan mengatur rata teks pada bulma.

Sekian tips dan trick tentang Cara Mengatur Rata Teks pada Bulma.

Kategori