Penggunaan Spacing dalam Bootstrap

Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membahas tentang Penggunaan Spasi (Spacing) dalam Bootstrap.

Sumber : Getbootstrap.com

Bootstrap mencakup berbagai macam kelas utilitas margin, padding, dan gap responsif singkat untuk memodifikasi tampilan elemen.

1. Margin dan Padding

Anda dapat menetapkan nilai margin atau padding yang responsif pada suatu elemen, baik untuk semua sisi maupun sebagian sisi, dengan menggunakan kelas shorthand. Sistem ini mendukung properti individual, semua sisi sekaligus, serta sisi vertikal dan horizontal.

Kelas-kelas tersebut dibangun berdasarkan peta Sass bawaan (default Sass map) dengan rentang nilai mulai dari 0.25rem hingga 3rem.

Jika Anda menggunakan CSS Grid layout, pertimbangkan untuk memakai utility gap untuk mengatur jarak antar-elemen grid.

2. Notasi (Penamaan Kelas)

Utility spacing yang berlaku untuk semua breakpoint — dari xs hingga xxl — tidak memiliki singkatan breakpoint di dalamnya. Hal ini karena kelas tersebut diterapkan mulai dari min-width: 0 dan seterusnya, sehingga tidak terikat pada media query tertentu.

Untuk breakpoint lainnya, kelas akan mencantumkan singkatan breakpoint.

• Dengan properti salah satu dari :
• m - untuk kelas yang mengatur margin
• p - untuk kelas yang mengatur padding

Dengan sides salah satu dari :

• t - untuk kelas yang mengatur margin-top atau padding-top
• b - untuk kelas yang mengatur margin-bottom atau padding-bottom
• s - (mulai) untuk kelas yang mengatur margin-left atau padding-left di LTR, margin-right atau padding-right di RTL
• e - (akhir) untuk kelas yang mengatur margin-right atau padding-right di LTR, margin-left atau padding-left di RTL
• x - untuk kelas yang mengatur *-left dan *-right
• y - untuk kelas yang mengatur *-top dan *-bottom
• blank - untuk kelas yang mengatur margin atau padding di keempat sisi elemen

Dengan size salah satu dari :

• 0 - untuk kelas yang menghilangkan margin atau padding dengan mengaturnya ke 0
• 1 - (secara default) untuk kelas yang mengatur margin atau padding ke $spacer * .25
• 2 - (secara default) untuk kelas yang mengatur margin atau padding ke $spacer * .5
• 3 - (secara default) untuk kelas yang mengatur margin atau padding ke $spacer
• 4 - (secara default) untuk kelas yang mengatur margin atau padding ke $spacer * 1.5
• 5 - (secara default) untuk kelas yang mengatur margin atau padding ke $spacer * 3
• auto - untuk kelas yang mengatur margin ke auto
• (Anda dapat menambahkan lebih banyak ukuran dengan menambahkan entri ke variabel peta Sass $spacers.)

Contoh :

Berikut adalah beberapa contoh representatif dari kelas-kelas ini :

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

2. Pemusatan Horizontal

Selain itu, Bootstrap juga menyertakan kelas .mx-auto untuk pemusatan horizontal pada konten tingkat blok dengan lebar tetap—yaitu, konten yang memiliki display: block dan lebar yang telah ditetapkan—dengan mengatur margin horizontal ke auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

3. Margin Negatif

Dalam CSS, properti margin dapat menggunakan nilai negatif (padding tidak dapat). Margin negatif ini dinonaktifkan secara default, tetapi dapat diaktifkan di Sass dengan mengatur $enable-negative-margins: true.

Sintaksnya hampir sama dengan utilitas margin positif default, tetapi dengan penambahan n sebelum ukuran yang diminta. Berikut contoh kelas yang merupakan kebalikan dari .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

4. Gap

Saat menggunakan display: grid, Anda dapat menggunakan utilitas gap pada kontainer grid induk. Ini dapat menghemat waktu karena tidak perlu menambahkan utilitas margin ke item grid individual (turunan dari kontainer display: grid). Utilitas gap bersifat responsif secara default, dan dihasilkan melalui API utilitas kami, berdasarkan peta Sass $spacers.

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Dukungan mencakup opsi responsif untuk semua titik henti grid Bootstrap, serta enam ukuran dari peta $spacers (0–5). Tidak ada kelas utilitas .gap-auto karena secara efektif sama dengan .gap-0.

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)