fungsi class clearfix pada bootstrap dan contoh pembuatannya

Masih seputar bootstrap memang jika kita membahas bootstrap materinya memang cukup banyak ya, dan pada kesempatan kali ini saya akan membahas tentang fungsi class clearfix pada bootstrap, clearfix dari tulisannya saja kita bisa melihat fungsi dari class ini yaitu membersihkan, apa saja yang harus di bersihkan, kita lihat nanti saja ya. oke jangan kemana-mana simak terus ya teman-teman.

Sebenarnya jka saya lihat fungsi class clearfix pada bootstrap, sama seperti kita menggunakan overflow hidden dan clear both pada css, itu argumen saya ya, jadi jika kita menggunakan float left dan float right pada konten yang notoabene adalah masih ada space kosong ditengah, pinggir, si isi konten yang di bawah akan naik kosong, si konten di bawah melihat ada space kosong yang berada di atas, maka dia akan naik menempatkan space kosong tersebut. Oke jika masih bingung kita akan masuk dalam contoh pembuatannya.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>fungsi class clearfix pada bootstrap </title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>fungsi class clearfix pada bootstrap</h1>
        <div class="row">
        <div class="col-md-6">
          <p>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 software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
          <div class="col-md-6">
          <p>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 software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        </div>
        <div class="bg-info clearfix ">
          <button class="btn btn-secondary float-left">Sebelumnya</button>
          <button class="btn btn-secondary float-right">Selanjutnya</button>
      </div>
      <p>Jika tidak ada <b>class clearfix</b>  tulisan ini akan naik keatas, berada di tengah-tengah tombol button</p>
      </div> 
    </div>
    
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <-e-script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"><-e-/script>
    <-e-script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"><-e-/script>
    <-e-script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"><-e-/script>
  </body>
</html>

Didalam bootstrap kita sudah di beri tau, bagian dari clearfix yang di beri tanda apa ya itu warnanya saya menyebutnya hijau kebiruan hehe, jadi space yang di tengah itu tidak bisa di isi lagi dengan koten yang bawahnya. oke saya rasa cukup sampai disini belajar kita tentang fungsi class clearfix pada bootstrap, semoga bermanfaat dan sampai jumpa.

Fungsi Class Clearfix Pada Bootstrap

Kategori