Cara menggunakan class=container html adalah

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.

Table of Contents Show

Pengertian Container
Default Container
Container Fluid
Responsif Container
Padding Container
Border, Margin dan Color Container
Apa itu class Container HTML?
Apa itu div class Container?
Apa fungsi dari class Container fluid?
Apa perbedaan antara .container dan container fluid?

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

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 / LayarExtra Kecil
<576 pxKecil
>= 576 pxMediun
>=768 pxBesar
>=992 pxExtra Besar
>=1200 px.container100 %540 px720 px960 px1140 px.conatiner-sm100 %540 px720 px960 px1140 px

<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>

0100 %100 %720 px960 px1140 px

<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>

1100 %100 %100 %960 px1140 px

<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>

2100 %100 %100 %100 %1140 px.

<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>

3100 %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 :

<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>

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

<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>

6 digunakan jika teman teman ingin membuat tampilan website yang mencakup seluruh lebar layar. Cara penggunaannya sama seperti .container yaitu :

<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>

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:

<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>

<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>

<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>

<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>

<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

<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>

3 . 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

<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>

5 untuk mengatur warna background dan

<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>

6 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

<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>

7. Sedangkan margin menggunakan class

<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>

8, 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.

Apa itu class Container HTML?

Class Container Container adalah fondasi dasar dari blok layout. Container berfungsi untuk membungkus blok di dalamnya, sehingga terlihat rapi terhadap ukuran layar. Container juga memiliki breakpoint. Ukuran kontainer akan 100% pada breakpoint tertentu.

Apa itu div class Container?

Div adalah salah satu elemen pada HTML yang berguna untuk membuat sebuah container atau wadah elemen dan memudahkan untuk mengelompokan elemen pada HTML.

Apa fungsi dari class 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 anda gunakan.