Container Bootstrap: Bootstrap Tutorial #15

Saat ini kita berada di tutorial ke 15 dari seri bootstrap ini. Kali ini kita akan membahas mengenai container pada bootstrap. Seharusnya kita menempat kan tutorial ini di awal karena container merupakan hal dasar dalam pembuatan web tapi tidak apa-apa yang penting tidak kelewatan ya.

Yang akan kita bahas pada edisi kali ini diantaranta adalah :

Mengetahui apa itu container
Kegunaan container
Cara menggunakan container

Nah, untuk teman – teman yang ketinggalan pada edisi tutorial sebelumnya silahkan membacanya di Tutorial bootstrap (khususnta bootstrap versi 4 ). Langsung saja mari kita mulai:

Section Artikel

1 Pengertian Container
2 Default Container
3 Container Fluid
4 Responsif Container
5 Padding Container
6 Border, Margin dan Color Container

Pengertian Container

Container adalah suatu elemen dasar dari bootstrap yang mutlak diperlukan jika ingin menggunakan sistem grid default bootstrap.

Container digunakan untuk menampung, mengisis, dan kadang – kadang digunakan sebagai pusat dari konten dari website. Dalam bootstrap secara umum terdapat 2 tipe dari container yaitu :

Class .container merupakan class yang menyetel lebar layout tidak penuh satu layar (biasanya saya menandainya seperti ini). Jika menggunakan class ini maka lebar akan bersifat
Class .container-fluid merupakan class container yang meyetel lebar layout maksimal atau mempunyai width : 100% jadi lebar nya kan memenuhi layar.

Tabel dibawah adalah penggambaran bagaimana penggunaan container terhadap ukuran layar:

class / Layar	Extra Kecil <576 px	Kecil >= 576 px	Mediun >=768 px	Besar >=992 px	Extra Besar >=1200 px
`.container`	100 %	540 px	720 px	960 px	1140 px
`.conatiner-sm`	100 %	540 px	720 px	960 px	1140 px
`.container-md`	100 %	100 %	720 px	960 px	1140 px
`.container-lg`	100 %	100 %	100 %	960 px	1140 px
`.container-xl`	100 %	100 %	100 %	100 %	1140 px
.`container-fluid`	100 %	100 %	100 %	100 %	100 %

Default Container

Pada bootstrap class .container merupakan class container default yang memiliki lebar container yang tetap atau fixed. cara menggunakannya seperti dibawah :

<div class="container"> </div>

contoh programnya adalah

<html>
  <head>
    <title>Container Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container" style="background-color:grey;">
      INI ISI CONTAINER DEFAULT
    </div>
  </body>
</html>

Container Fluid

Seperti yang dijelaskan diatas bahwa class .continer-fluid digunakan jika teman teman ingin membuat tampilan website yang mencakup seluruh lebar layar. Cara penggunaannya sama seperti .container yaitu :

<div class="continer-fluid"> </div>

contoh programnya

<html>
  <head>
    <title>Container Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container-fluid" style="background-color:grey;">
      INI ISI CONTAINER DEFAULT
    </div>
  </body>
</html>

Responsif Container

Kalu yang ini hanya bisa digunakan jika teman teman menggunakan bootstrap versi 4.4 keatas. Karena ini merupakan fitur baru . Class continer ini memungkinkan teman – teman untuk menentukan lebar (100%) tampilan hingga batas dari masing – masing class tercapai.

terdapat beberapa pilihan yaitu:

<div class="container-sm"> <div>

<div class="container-md"></div>

<div class="container-lg"> <div>

<div class="container-xl"></div>

<html>
  <head>
    <title>Container Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container-sm" style="background-color:grey;">ini menggunakan container-sm</div>
    <div class="container-md" style="background-color:blue;">ini menggunakan container-md</div>
    <div class="container-lg" style="background-color:green;">ini menggunakan container-lg</div>
    <div class="container-xl" style="background-color:yellow;">ini menggunakan container-xl</div>
  </body>
</html>

Padding Container

Kita juga dapat mengatur padding pada container dengan menggunakan class .pt-x . x diisi angka ya teman – teman. Penggunaan class tersebut setelah class .container. Atau lebih jelasnya lihat pada program dibawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container pt-4">
  <h1>Halaman Utama</h1>
  <p>Conatiner ini menggunakan padding 16 pixel (.pt-3).</p>
  <p>Rubah angka class pt-3 untuk melihat hasilnya ya teman - teman.</p>
</div>

</body>
</html>

Border, Margin dan Color Container

Selain diatur padding nya container juga dapat diatur warna serta bordernya yaitu dengan menambahkan class .bg-white untuk mengatur warna background dan .text-white untuk mengatur warna tulisan didalam container. “white” bisa teman – teman ganti sesuai warna yang diinginkan atau lihat di Warna di Bootstrap: Bootstrap Tutorial #6.

Untuk border tinggal menambahkan class .border. Sedangkan margin menggunakan class .my-3, ganti angka 3 ke margin yang diinginkan ya

contoh penggunaannya langsung pada program ya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container p-3 my-3 border">
  <h1>Halaman Bootstrap</h1>
  <p>Container ini menggunakan padding, margin, dan border</p>
</div>

<div class="container p-3 bg-dark text-white">
  <h1>Halaman Bootstrap</h1>
  <p>Container ini menggunakan padding, warna background, dan warna text yang dirubah</p>
</div>

<div class="container p-3 my-3 bg-primary text-white">
  <h1>Halaman Bootstrap</h1>
  <p>Container ini menggunakan padding, margin, warna background, dan warna text yang dirubah</p>
</div>

</body>
</html>

Untuk hal – hal yang lain dapat teman – teman coba sendiri ya baik menggunakan class atau css. Tergantung kreatifitas dan kebutuhan teman – teman.