Utilities Pada Bootstrap 4

Bootstrap 4 hadir dengan fitur yang lebih kaya, salah satu fitur baru yang disediakan pada Bootstrap 4 adalah adalah utilities, yakni class-class yang berdiri sendiri yang digunakan mengatur komponen-komponen dalam Bootstrap. Dengan menggunakan class utilities, kita akan semakin cepat mengatur style pada website, tanpa harus menambahkan costum css sendiri. Class utilities yang disediakan Bootstrap terbagi menjadi 15 kategori yakni:

  • Borders
  • Clearfix
  • Close icon
  • Colors
  • Flexbox
  • Display property
  • Image replacement
  • Invisible content
  • Position
  • Responsive helpers
  • Screenreaders
  • Sizing
  • Spacing
  • Typography
  • Vertical align

Sebagai contoh misalnya kita gunakan class utilities untuk mengatur Borders. Class utilities Borders adalah sebagai berikut:

  • border - untuk menambahkan border disemua sisi (top, right, bottom, left).
  • border-0 - untuk menghapus nilai border pada komponen.
  • border-top-0 - untuk menambahkan border disisi atas (top).
  • border-right-0 - untuk menambahkan border disisi atas (right).
  • border-bottom-0 - untuk menambahkan border disisi atas (bottom).
  • border-left-0 - untuk menambahkan border disisi atas (left).

Nilai border-with sebesar 1px, border-style solid dan border-color adalah black.

Berikut adalah cara menggunakannya.

Utilities Pada Bootstrap 4

Maka kita akan mendapatkan hasil seperti ini.

Utilities Pada Bootstrap 4

Kemudian ada juga Spacing. Class utilities Spacing terdiri dari margin dan padding, berikut adalah daftar classnya:

  • m-(nilai) - untuk mengatur nilai margin.
  • p-(nilai) - untuk mengatur nilai padding.
  • mt/pt-(nilai) - untuk mengatur nilai margin-top atau padding-top.
  • mb/pb-(nilai) - untuk mengatur nilai margin-bottom atau padding-bottom.
  • ml/pl-(nilai) - untuk mengatur nilai margin-left atau padding-left.
  • mr/pr-(nilai) - untuk mengatur nilai margin-right or padding-right.
  • mx/px-(nilai) - untuk mengatur nilai margin/padding-left and margin/padding-right.
  • my/py-(nilai) - untuk mengatur nilai margin/padding-top and margin/padding-bottom.
  • m/p-auto - untuk mengatur nilai padding dan margin auto.

Dan untuk nilainya adalah sebagai berikut:

  • 0 - nilai margin dan padding sebesar 0rem.
  • 1 - nilai margin dan padding sebesar .25rem.
  • 2 - nilai margin dan padding sebesar .5rem.
  • 3 - nilai margin dan padding sebesar 1rem.
  • 4 - nilai margin dan padding sebesar 1.5rem.
  • 5 - nilai margin dan padding sebesar 3rem.

Berikut adalah cara menggunakannya.

Utilities Pada Bootstrap 4

Maka kita akan mendapatkan hasil seperti ini.

Utilities Pada Bootstrap 4

5 Maret 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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat