Untuk memotong bagian-bagian layar ditubuhkan propery float pada CSS dengan cara membuat filenya secara langsung.
Hal ini tidak akan menjadi masalah jika hanya satu atau dua bagian yang diberikan float, namun pada umumnya, halaman web biasanya membutuhkan puluhan property float.
Kesulitan yang Anda hadapi sudah terpecahkan semenjak adanya bootstrap, baik versi yang ke 3 maupun yang ke empat.
Pengertian Bootstrap
Bootstrap merupakan sebuah framework front-end yang dibuat untuk mempercepatdan mempermudah proses development web.Di dalam Bootstrap terdapat beragam template HTML dan CSS seperti form, button, table, navigation, modal dan lain-lain.
Dan yang paling penting, Bootstrap mempermudah developer dalam mengembangkan sebuah website yang responsive baik saat halaman web dibuka pada desktop, tablet maupun handphone.
Cara Menggunakan Bootstrap 4
Ada dua cara menggunakan bootstrap, yaitu:1# Mendownload Langsung
Download langsung bootsrap 4 melalui situs resminya di getbootstrap.com
2# Menggunakan Content Delivery Network (CDN)
Sisipkan beberapa baris kode di bawah ini pada halaman website Anda namun cara kedua ini mengharuskan terhubung ke internet.
<!-- File CSS -- >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Simpan file CSS ini di antara tag <head> -->
<!-- File Jquery dan Javascript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js""></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Simpan file CSS ini sebelum tag </body> -->Penjelasan Grid System Pada Bootstrap 4
Bootstrap 4 Grid System memiliki 5 kelas grid, yaitu:- .col-(extra small devices = layar dengan lebar kurang dari 576px)
- .col-sm-(small devices = layar dengan lebar sama atau lebih dari 576px)
- .col-md-(medium devices = layar dengan lebar sama atau lebih dari 768px)
- .col-lg-(large devices = layar dengan lebar sama atau lebih dari 992px)
- .col-xl-(xlarge devices = layar dengan lebar sama atau lebih dari 1200px)
Catatan:
Setiap kelas dapat digabungkan untuk membuat layout yang lebih dinamis.
Setiap kelas bersifat scale up, missal agar sm dan md memiliki pola lebar yang sama, cukup menggunakan sm.
Struktur Dasar Grid System Pada Bootstrap 4
Contoh Grid System Pada Bootstrap 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Bootstrap Grid</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" style="background: blueviolet; height: 200px;"></div>
<div class="col-sm-4" style="background: magenta;height: 200px"></div>
<div class="col-sm-4" style="background: cyan; height: 200px"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>Hasilnya:
Kesimpulan
Demikianlah artikel dan pembahasan tentang grid system di dalam bootstrap 4 yang dapat kami jelaskan.Apabila masih bingung dan belum tahu cara kerjanya silahkan bertanya melalui kolom komentar.
Jangan lupa subscribe atau bookmark blog ini agar terus mendapatkan informasi terbaru seputar dunia pemrograman.
Sekian,
SaungIT
Comments