Perubahan Sistem Grid Bootstrap 4

22/08/2017    Maykhel David    982     Website

Sampai saat ini bootstrap masih menjadi framework frontend paling popular dibandingkan dengan framework lainnya, Pada tanggal 10 Agustus 2017 lalu terdapat update besar pada bootstrap 4 seperti yang dijelaskan pada artikel dumetschool yang berjudul Rilis Bootstrap 4 dan Fitur Terbarunya. Dengan penambahan berbagai fitur tentunya bootstrap 4 akan semakin powerful sebagai framework frontend paling popular.

Untuk kali ini saya akan menjelaskan tetang system grid terbaru pada bootstrap 4. Jika sebelumnya kalian menggunakan bootstrap 3, tentu kalian tidak akan asing lagi dengan system grid atau kolom yang baru.

Penambahan kategori kolom Extra Large

 

 

  Extra small
<576px
Small
=576px
Medium
=768px
Large
=992px
Extra large
=1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

Pada system kolom diatas bisa kita lihat ada penambahan dan beberapa perubahan yangcukup penting dimana pada bootstrap 4 ini terdapat kolom Extra Large yang membuat breakpoint lainnya mengalami perubahan, masing masing kolom pada bootstrap masih berjumlah 12, dan tidak ada lagi col-xs- karena pada update ini kita bisa menggunakan mode auto column hanya dengan menuliskan class .col saja.

Pada versi bootstrap 4 beta ini masing-masing kolom masih tetap memiliki jarak 30px ( kiri = 15px, kanan = 15px ) sama seperti versi sebelumnya dan juga fitur nested masih tetap dipertahankan pada bootstrap 4 ini. Dari sekian banyak perubahan dalam system grid tentu akan memberikan kita banyak kemungkinan dalam membuat variasi desain dan layout dengan grid bootstrap agar lebih maksimal.

Baiklah teman teman, dalam penggunaan system grid bootstrap 4 dasar secara keseluruhan masih tetap sama dengan versi bootstrap sebelumnya yaitu bootstrap 3. Yang membedakan adanya beberapa tambahan seperti yang saya jelaskan diatas dan beberapa penambahan fitur unik dalam system grid bootstrap 4 pada artikel selanjutnya yang berjudul menerapkan auto column pada bootstrap 4

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More