Cara Mengatur Rata Teks pada Bulma

Pada membangun suatu teks supaya terlihat rapih karenanya kita memerlukan kegunaan unutk meratakan teks tersebut, seperti bagi meratakan teks hanya ke sebalah kiri saja atau dapat pun kanan dan tengah saja. Dan di sebuah artikel di situs pasti akan terlihat bagus apabila kita menaruh kegunaan rata teks tersebut, karenanya dari itu saya akan membagi tips dan trick Cara Mengatur Rata Teks di Bulma.





Pada tips dan trick kali ini saya akan membahas helper class di bulma framework bagi meratakan sebuah teks di situs. Seketika saja saya akan memberikan strategi Cara Mengatur Rata Teks 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>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> bagi mengatur <b>align</b> di 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 karenanya tampilannya akan menjadi seperti berikut:



Dalam



Di gambar diatas teman-teman dapat melihat perbedaan antara kolom satu dengan yang lainnya, kolom pertama-tama dari kiri saya berikan class has-text-left sehingga akan membangun teks menjadi rata kiri, kolom kedua saya berikan class has-text-centered karenanya teks emnjadi rata tegah, lalu kolom terakhir saya berikan class has-text-right sehingga membangun teks menjadi rata kanan.



Dengan bulma kita dapat dengan gampang memodifikasi teks dengan memberikan helper class yang telah di sediakan oleh bulma. Bagaimana teman-teman lumayan mudahkan mengatur rata teks di bulma.



Demikian tips dan trick mengenai Cara Mengatur Rata Teks di Bulma.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Membuat Table Warna Berselang dengan PHP