Belajar Bootstrap Layout

Belajar Bootstrap Layout

00. Sebelum Belajar

Sebelum belajar pastikan sudah memahami:

• HTML
• CSS
• Javascript
• Bootstrap Dasar

01. Flex

• Bootstrap menyediakan banyak class yang bisa kita gunakan untuk membuat layout menggunakan flexbox
• https://getbootstrap.com/docs/5.3/utilities/flex/ 
  
  

Contoh :

02. Float

• Bootstrap menyediakan class yang bisa kita gunakan untuk mengubah aturan float
• https://getbootstrap.com/docs/5.3/utilities/float/
  
  

Contoh:

03. Stack

• Bootstrap memiliki helper yang bisa digunakan untuk membuat layout vertical atau horizontal secara cepat menggunakan flexbox
• https://getbootstrap.com/docs/5.3/helpers/stacks/
  
  

Contoh :

04. Container

• Container adalah komponen utama di Bootstrap yang biasanya digunakan sebagai layout
• Bootstrap menyediakan berbagai jenis Container yang bisa kita gunakan sesuai dengan Breakpoint yang kita butuhkan
• https://getbootstrap.com/docs/5.3/layout/containers/
  
  

Contoh :

05. Grid

• Layout yang sering digunakan ketika menggunakan Bootstrap adalah Grid
• Bootstrap Grid berbeda dengan CSS Grid
• Bootstrap Grid sebenarnya menggunakan Flexbox
• https://getbootstrap.com/docs/5.3/layout/grid/
  
  

Contoh :

06. Column

• Saat menggunakan Grid, kita akan banyak menggunakan column
• Bootstrap memiliki pengaturan yang bisa digunakan untuk mengatur tata letak column nya
• https://getbootstrap.com/docs/5.3/layout/columns/
  
  

Contoh :

07. Gutter

• Gutter merupakan padding antara column di Bootstrap Grid
• https://getbootstrap.com/docs/5.3/layout/gutters/
  
  

Contoh :

08. CSS Grid

• Bootstrap Grid dibuat sudah lama sekali, bahkan sebelum fitur CSS modern seperti CSS Grid ada
• Sejak versi Bootstrap 5.1, terdapat fitur baru yang menggunakan CSS Grid
• Namun, fitur tersebut masih experimental, oleh karena itu tidak akan dibahas di kelas ini, dikhawatirkan fiturnya masih akan berubah
• Dan secara default, CSS Grid di Bootstrap tidak aktif, kita harus melakukan kompilasi ulang kode Bootstrap jika ingin mengaktifkan fitur CSS Grid
• https://getbootstrap.com/docs/5.3/layout/css-grid/
  
  

Sumber : Youtube Programmer Zaman Now