Hallo teman-teman dumet school. Kembali lagi dengan saya Shelli Ripati di kursus Web Design. Kali ini saya masih akan membahas tentang class Bootstrap 4 yaitu tentang cara Mengenal Class Float Pada Bootstrap 4. Float disini mungkin teman-teman sudah tau jika teman-teman sudah menguasai css. Karena property float disini berfungsi untuk mengatur posisi suatu elemen ke kiri atau ke kanan namun dengan melayang.
Sekarang kita tidak perlu lagi membuat custom css tentang float, karena di bootstrap 4 sudah disediakan dan teman-teman tinggal pakai saja.
Untuk dapat lebih Mengenal Class Float Pada Bootstrap 4 disini saya contohkan struktur htmlnya. Teman-teman bisa salin script sebagai berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!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"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Hello, world!</title> <style type="text/css"> .position-static, .position-relative, .position-fixed, .position-sticky{width: 500px; height: 500px} .position-absolute{width:200px; height: 200px; top:0; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col"> <div class="float-left bg-success">Float left on all viewport sizes</div><br> <div class="float-right bg-info">Float right on all viewport sizes</div><br> <div class="float-none bg-warning">Don't float on all viewport sizes</div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html> |
Jika teman-teman buka di browser masing-masing maka akan seperti pada gambar di bawah ini tampilannya. Dimana ada 3 div yang saya berikan class float. Float right untuk mengatur letak suatu elemen ke sebelah kanan. Float left untuk mengatur letak suatu elemen di sebelah kiri dan float none saya berikan di div terakhir yang artinya tidak saya berikan property float.
Teman-teman bisa lihat gambar di atas ini perbedaannya. Nah disini kita bisa mengatur colnya tanpa kita harus menambahkan offset pada col tersebut.
Demikian artikel tentang cara Mengenal Class Float Pada Bootstrap 4. Semoga artikel ini dapat bermanfaat untuk teman-teman dan buat teman-teman yang penasaran bisa langsung di praktekkan. Selamat mencoba