Containers adalah element layout yang paling dasar pada bootstrap, kita wajib menggunakan containers jika ingin menggunakan sistem grid bootstrap (sistem grid bootstrap akan kita pelajari pada tutorial selanjutnya).
Container bisa kita anggap sebagai wadah yang menampung semua element grid sistem atau element lain nya dari bootstrap.
Class containers adalah class terluar dari sebuah elemen konten, dimana class ini akan mengatur lebar konten sesuai dengan class yang digunakan. Di dalam framework Bootstrap terdapat 2 jenis containers yaitu .container dan .container-fluid.
Jika kita melihat website yang ukuran lebar layoutnya tidak penuh, berarti website tersebut menggunakan container untuk lebar layoutnya, sebaliknya jika menggunakan container-fluid, tampilan layout websitenya akan berukuran penuh.
Class Container (.Container)
Class container atau .container memiliki ukuran fixed width atau lebar disesuaikan dengan ukuran yang telah ditentukan atau fix. Maksimal lebar kontainer untuk class ini yaitu 1170px. Beberapa aturan dari .container berdasarkan resolusi perangkat yaitu :
- Untuk resolusi layar lebih besar atau sama dengan 1200px memiliki lebar kontainer sebesar 1170px,
- Untuk resolusi layar lebih besar atau sama dengan 992px memiliki lebar kontainer sebesar 970px,
- Untuk resolusi layar lebih besar atau sama dengan 768px memiliki lebar kontainer sebesar 750px,
- Untuk resolusi layar lebih kecil dari 768px memiliki lebar kontainer sesuai dengan resolusi layar (auto).
Penerapan dari .container yaitu sebagai berikut :
<div class="container">
...
</div>
Selanjutnya kita buat halaman web sebagai contoh untuk penggunaan container, dengan nama file container.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Containers Bootstrap</title>
</head>
<body>
<div class="container">
<div class="bg-primary text-white text-center">
<br/>
<h4>Contoh container</h4>
<br/>
</div>
<a href="https://www.agussuratna.net">WWWW.AGUSSURATNA.NET</a>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
Hasil :
Pada contoh penggunaan container di atas, untuk menggunakan container kita tinggal menambahkan class container pada element paling luar untuk membungkus element-element lainnya.
Adapun element yang dibungkus oleh container ini kita buat dengan element div yang menggunakan class bg-primary, text-white, dan text-center, kemudian di dalamnya ada heading h4, dan element hyperlink.
NOTE :
- bg-primary adalah class yang disediakan oleh bootstrap 4 untuk membuat background warna biru.
- text-white adalah class yang disediakan oleh bootstrap 4 untuk membuat tulisan text menjadi warna putih.
- text-center adalah class untuk memindahkan letak text ke tengah.
Class Container Fluid (.Container-fluid)
Class container fluid atau .container-fluid memiliki ukuran lebar kontainer memenuhi lebar layar (full width). Dengan menggunakan class ini maka kontainer yang anda buat akan memenuli ukuran layar dari semua perangkat yang kita gunakan.
Jika container berukuran tidak penuh, dan letaknya di tengah, maka container-fluid adalah kebalikannya, container-fluid memiliki lebar penuh.
Penerapan dari .container-fluid yaitu senagai berikut :
<div class="container-fluid">
...
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Containers Bootstrap</title>
</head>
<body>
<div class="container-fluid">
<div class="bg-primary text-white text-center">
<br/>
<h4>Contoh container</h4>
<br/>
</div>
<a href="https://www.agussuratna.net">WWWW.AGUSSURATNA.NET</a>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
Hasil :
Pada gambar di atas terlihat class container-fluid memiliki ukuran lebar yang penuh.
Be the first to comment