Mengenal Utilities Sizing pada Bootstrap 4

Pada penggunaan class yang dilakukan secara maksimal akan memberikan banyak kemudahan yang didapatkan dari banyaknya kelebihan css dalam mengelompokkan style dari banyak elemen yang serupa. Dalam konsep framework CSS sendiri adalah salah satu contoh dalam memaksimalkan fungsi CSS yang ada. Bootstrap adalah salah satu framework CSS terbaik yang bisa kalian gunakan untuk membuat website responsive, dimana dalam bootstrap ini terdapat banyak sekali sekali berbagai fitur yang memudahkan kita dalam membuat website responsive seperti carousel, tab content, navigasi, dan masih banyak lagi yang lainnya.

Banyak pengguna yang masih belum tahu cara memanfaatkan bootstrap dengan maksimal pada bootstrap 3, ditambah saat ini update bootstrap terbaru yaitu bootstrap 4.0.0 sudah memasuki versi beta, dimana semua fitur sudah layak pakai, hanya tinggal menunggu perbaikan kecil dari feedback pengguna lainnya.

Pada artikel kali ini kita akan membahas tentang penggunaan utilities sizing yang ada pada bootstrap versi terbaru yaitu versi bootstrap 4 beta.

Jika kita lihat layout diatas, sebenarnya kita bisa membuat atau mengatur konten bootstrap dengan class dari utilities yang disediakan, misalnya seperti ini

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>

<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>

<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>

<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>

Pada baris kode diatas kita bisa lihat terdapat class w-20 dan juga p-3

Masing masing class diatas memiliki fungsi berbeda, dimana class w mewakili width atau lebar elemen yang terbagi menjadi 25, 50, 75, dan 100.  Sedangkan p mewakili padding dengan range 1 sampai 5 saja.

Begitu juga dengan height, atau tinggi elemen, dimana kita dapat menggunakan class h-20 sama seperti pada width untuk mengatur konten dengan persentase 25, 50, 75, dan 100.

 

Baiklah teman teman artikel diatas adalah sebagian kecil dari banyaknya utilities yang bisa kita gunakan pada bootstrap, untuk yang lainnya kita akan bahas pada artikel yang akan datang, demikian artikel tentang mengenal utilities sizing pada bootstrap 4. Semoga bermanfaat.

31 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat