Kita langsung mulai coding. Saya sudah menyediakan satu buah source code baru yang merupakan boilerplate dari Bootstrap 5. Kali ini saya beri judul “Responsive Grid System”. Dan ini adalah hasilnya bila kita lihat dari browser.

Untuk menggunakan Grid pada Bootstrap, pertama kita harus membuat container terlebih dahulu. Caranya kita tambahkan sebuah div dengan mengggunakan kelas container. Gunanya untuk apa? Sesuai dengan namanya ya, container adalah sebuah wadah untuk menampung konten. Seluruh konten bootstrap harus berada di dalam kontainer. Termasuk navbar yang telah kita pelajari pada video sebelumnya.

Kalau kita lihat kembali ke dokumentasi Bootstrap mengenai Navbar, dan kita lihat lagi ke contoh kode yang diberikan. Sebenarnya komponen Navbar ini seharusnya dibungkus di dalam container. Bisa kita lihat disini, setelah tag nav, ada sebuah tag div yang menggunakan kelas container-fluid. Di video sebelumnya kita tidak membahas mengenai container ini ya, karena kita ingin lebih berkonsentrasi pada komponen navbarnya. Lagipula khusus untuk komponen navbar, dapat berfungsi dengan baik walaupun tidak menggunakan container, jadi disini container adalah opsional.

Namun sebaliknya untuk menggunakan Grid, kita diharuskan menggunakan container, kalau tidak maka grid tidak bisa berfungsi dengan benar. Jadi pada awal video ini kita akan membahas terlebih dahulu mengenai container.

Nah, berhubung semua konten mesti berada di dalam kontainer, artinya kita pindahkan tag h1 ke dalam kontainer. Dan agar kita bisa melihat dengan lebih jelas bagaimana sih bentuk container di dalam browser, maka kita tambahkan kelas bg-primary pada tag div.

Kita simpan dan refresh browser. Perhatikan sekarang kita memiliki baris baru dengan konten bersifat responsive. Pada saat browser berukuran paling kecil, maka setiap baris hanya mengandung satu kolom. Dan bila diperbesar hingga memasuki breakpoint medium, maka setiap baris mengandung dua kolom. Dan bila kita perbesar lagi hingga breakpoint extra large, maka setiap baris mengandung empat kolom.

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

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:

  
    
    
    
    
    
    
    
  
  
    

      INI ISI CONTAINER DEFAULT
    
  
  

  
    
    
    
    
    
    
    
  
  
    

      INI ISI CONTAINER DEFAULT
    
  
  

  
    
    
    
    
    
    
    
  
  
    

      INI ISI CONTAINER DEFAULT
    
  
  

  
    
    
    
    
    
    
    
  
  
    

      INI ISI CONTAINER DEFAULT
    
  
  

Default Container

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

  
    
    
    
    
    
    
    
  
  
    

      INI ISI CONTAINER DEFAULT
    
  
  

contoh programnya adalah

<html>
  
    
    
    scale=1">
    css/bootstrap.min.css">
    
    
    
  
  
    <div class="container" style="background-color:grey;">
      INI ISI CONTAINER DEFAULT