Cara Menghilangkan Padding dan Margin di Bulma

Secara umumnya setiap kolom atau class yang terdapat di framework css mempunyai property dan value masing-masing seperti adanya padding dan margin di setiap class yang kita berikan di elemn html. Di tips dan trik kali ini saya akan membagikan Cara Menghilangkan Padding dan Margin di Bulma





Di bulma framework ada diantara class helper yang mempermudah kita bagi menghilangkan padding dan margin bawaan di class yang terdapat di bulma. Saya akan mengambil contoh menghilangkan padding di class box dan margin di class tittle, Seketika saja saya akan memberikan strategi Cara Menghilangkan Padding dan Margin 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>Bulma Helper</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>Menghilangkan Padding dan Margin</h1>
  <div class=columns>
  
    <div class=column>
      <div class=box notification is-success>
        <h2 class=title is-4><b>Paddingless</b></h2>
        <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sistem like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>

    <div class=column>
      <div class=box notification is-info>
        <h2 class=title is-4><b>Marginless</b></h2>
        <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sistem like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>

  </div>
</div>
<br>
</body>
</html>


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



masing



– Kita akan mencoba menghilangkan padding di class box dan margin di class tittle, sekarang ini coba teman-teman tambahkan class is-paddingless di class box dan is-marginless di class tittle :




<div class=column>
      <div class=box notification is-success is-paddingless><!--paddingless-->
        <h2 class=title is-4><b>Paddingless</b></h2>
        <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sistem like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>

    <div class=column>
      <div class=box notification is-info>
        <h2 class=title is-4 is-marginless><b>Marginless</b></h2><!--marginless-->
        <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sistem like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>


Kini refresh browser teman-teman karenanya efek class yang tadi kita berikan akan terlihat seperti gamabar di bawah ini:



masing



Dengan bulma kita dapat dengan gampang menghilangkan jarak dengan memberikan helper class yang telah di sediakan oleh bulma. Bagaimana teman-teman lumayan mudahkan Cara Menghilangkan Padding dan Margin di Bulma.



Demikianlah tips dan trick mengenai Cara Menghilangkan Padding dan Margin di Bulma.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more