Kita langsung mulai coding. Saya sudah menyediakan satu buah source code baru yang merupakan boilerplate dari Bootstrap 5. Isi dari halaman ini hanya judul “Spacing Utility”.

Kita tambahkan isinya dan disini kita langsung praktekkan Colors Utility yang barusan kita pelajari dari video sebelumnya. Kita tambahkan div dengan kelas bg-primary. Lalu kita berikan konten Primary. Kita simpan dan refresh browser. Sekarang kita sudah memiliki satu buah baris berwarna biru, dengan konten Primary.

Kita ulangi div seperti ini untuk beberapa warna lainnya ya, yaitu secondary, success, danger, warning, dan info. Nah sekarang kita sudah memiliki enam buah baris yang menggunakan warna latar belakang standar dari Bootstrap.

Perhatikan bawah bagian paling kiri dan paling kanan dari setiap barisnya menempel ke ujung browser. Walaupun saya mengubah ukuran browser menjadi lebih besar ataupun menjadi lebih kecil.

Bagaimana bila kita ingin agar bagian ujung kiri baris kita tidak menempel ke bagian kiri browser? Kalau menggunakan kode CSS, kita bisa menambahkan properti margin-left. Sebagai contoh, kita gunakan inline CSS pada div primary kita. Kita tambahkan attribute style. Lalu kita isikan dengan margin-left: 50px;. Nah sekarang bagian kiri dari baris Primary sudah tidak menempel lagi ke tepi browser, melainkan sudah memiliki jarak sebesar 50 pixel.

Nah, kita juga bisa melakukan hal serupa dengan menggunakan Spacing Utility dari Bootstrap. Caranya? Kita hapus dahulu attribute style. Untuk memberikan margin pada sebelah kiri, kita bisa menggunakan kelas dengan nama Margin Start. Ingat ya, namanya adalah Margin Start, bukan Margin Left seperti properti CSS. Kalau kita menggunakan Bootstrap versi 4 atau sebelumnya, nama kelasnya masih Margin Left, namun sejak Bootstrap versi 5 sudah diganti menjadi Margin Start.

Sebagai contoh, pada div primary, kita tambahkan lagi kelas Margin Start, yang kita singkat dengan dua huruf yaitu ms. Lalu kita tambahkan dash. Dan kita bisa memilih angka diantara 0 hingga 5. 0 artinya tidak ada margin sama sekali. Sedangkan 5 berarti margin dengan jarak paling besar. Sebagai contoh pada div primary kita berikan kelas ms-0. Lalu pada div berikutnya kita tambahkan juga ms-1, ms-2, hingga ms-5.

Kita simpan dan lihat hasilnya pada browser. Nah sekarang semua baris kita memiliki kelas margin start ya. Dimulai dari Primary yang menggunakan margin start 0, sehingga tidak memiliki margin sama sekali. Kemudian secondary mengggunakan margin start 1, sehingga ada sedikit jarak pada sebelah kirinya. Dan berikutnya semakin ke bawah, jaraknya akan semakin besar. Perhatikan bahwa perubahan jarak antara ms-0 ke ms-1 hanya sedikit saja. Sedangkan perubahan jarak antara ms-4 ke ms-5 kurang lebih hampir dua kali lipatnya.

Apa yang terjadi apabila kita mengisikan angka 6? Misalkan baris terakhir saya ganti ms-5 menjadi ms-6. Hasilnya? Tidak ada margin sama sekali. Ini adalah kekurangan dari pemograman CSS. Apabila kita salah ketik nama kelas, maka dianggap tidak terjadi apa-apa. Tidak ada pesan kesalahan sama sekali dari browser maupun text editor. Bahkan bila kita hanya salah menuliskan huruf M menjadi huruf besar, misalkan pada ms-4, maka baris warning menjadi tidak memiliki margin sama sekali. Oleh karena itu kita mesti lebih teliti dalam menuliskan nama kelas. Terutama bagi yang masih baru belajar pemograman, mungkin masih sering terjadi kesalahan typo, yaitu kesalahan yang terjadi hanya karena salah ketik saja. Kita benarkan kembali kelas ms-4 dan ms-5.

Selanjutnya bagaimana caranya apabila kita ingin agar jaraknya berada di sebelah kanan. Kita bisa melakukannya dengan menggunakan kelas Margin End. Sebagai contoh, kita copy keenam tag div ini. Kemudian kita ganti kelasnya, yang tadinya adalah ms atau Margin Start, menjadi me atau Margin End. Kita simpan dan refresh browser. Sekarang kita memiliki 6 buah baris baru, yang memiliki margin di sebelah kanan.

Mungkin teman-teman ada yang bertanya. Mengapa Bootstrap 5 menggunakan istilah Margin Start dan Margin End? Mengapa tidak mengikuti Bootstrap versi sebelumnya, atau mengikuti istilah pada CSS Margin Left dan Margin Right? Nah, bagi teman-teman yang sudah mempelajari Flexbox dari video sebelumnya, tentunya lebih mudah mengerti mengenai penggunaan istilah ini, karena Bootstrap 5 mengikuti gaya Flexbox.

Jawaban dari pertanyaan ini adalah karena arah bisa dibalik. Secara default, arah dari browser kita adalah dari kiri ke kanan. Makanya defaultnya Margin Start identik dengan Margin Left, sedangkan Margin End berarti Margin Right. Namun apabila arah ini kita ganti menjadi dari kanan ke kiri, maka start akan berubah menjadi di kanan, sedangkan end berubah menjadi di kiri.

Bagaimana cara mengganti arah? Kita bisa menggunakan attribute dir pada tag HTML. Sebagai contoh, kita ke tag HTML kita. Kita tambahkan attribute baru dir. Kita bisa lihat auto-complete dari Atom menunjukkan bahwa ada 2 nilai yang bisa kita gunakan untuk attribute dir, yaitu LTR dan RTL. Nilai default adalah LTR, singkatan dari Left To Right. Artinya dari kiri ke kanan. Kalau saya isikan nilai LTR, maka tidak ada perubahan pada browser kita ya. Karena memang dari awal nilainya LTR.

Kalau saya ganti nilainya menjadi RTL, maka semua tulisan akan berpindah menjadi di kanan. Karena arah browser berubah menjadi dari kanan ke kiri. RTL ini berguna untuk penulisan situs dalam bahasa-bahasa tertentu, yang dibaca dari arah kanan ke kiri.

Namun perhatikan disini bahwa margin-start pada Bootstrap masih tetap berada di kiri ya. Hal ini disebabkan karena keterbatasan dari bahasa CSS, yang belum mendukung struktur logika untuk percabangan alur program, seperti if then else. Jadi Bootstrap belum bisa secara otomatis mengubah apabila LTR maka Margin-Start berada di kiri, sedangkan kalau RTL maka Margin-Start berada di sebelah kanan.

Harus kita sendiri yang mengubah arah margin-start. Bagaimana caranya? Kita buka getbootstrap.com dan kita pilih halaman dokumentasi. Dan pada bagian Getting Started, kita bisa menemukan bagian RTL. Kita bisa baca-baca lebih lanjut mengenai RTL pada halaman dokumentasi ini. Disini dijelaskan bahwa untuk menggunakan RTL, kita harus menggunakan tag link ke CSS Bootstrap yang khusus RTL. Kita copy kode tersebut dan kita paste ke kode HTML kita. Kalau kita bandingkan dengan tag link Bootstrap sebelumnya menuju ke file bootstrap.min.css sedangkan tag link yang baru menuju ke file bootstrap.rtl.min.css. Artinya Bootstrap yang dirancang khusus untuk RTL. Kita ubah dahulu tag link lama kita menjadi komentar. Lalu kita simpan dan refresh browser.

Nah, sekarang margin start kita sudah berubah, dari yang awalnya berupa margin di sebelah kiri menjadi margin di sebelah kanan. Dan begitu juga margin end posisinya sudah dibalik ya. Jadi kurang lebih beginilah cara membalikkan arah menjadi right to left. Sekarang kita kembalikan dahulu kode kita menjadi LTR.

Kita lanjutkan pembahasan kita mengenai margin. Tadinya kita sudah bisa menambahkan margin di sebelah kiri dan kanan. Bagaimana dengan atas atau bawah? Nah, kita bisa menambahkan margin di atas dengan cara menggunakan kelas margin top. Sebagai contoh, kita ke tag danger pertama kita ya. Kita ubah nama kelasnya dari tadinya Margin Start 3. Kita ganti menjadi Margin Top 3. Tulisannya adalah mt-3. Kita simpan dan refresh browser. Perhatikan pada baris danger sekarang sudah tidak ada margin di sebelah kiri, namun ada margin di sebelah atasnya.

Kalau kita mau menambahkan margin di sebelah bawah, maka kita bisa menggunakan margin bottom. Sebagai contoh, saya ganti lagi nama kelasnya menjadi mb-3. Dan sekarang margin berada di sebelah bawah baris Danger.

Kita juga bisa menambahkan margin langsung di keempat arah. Caranya? Kita langsung saja menggunakan kelas margin, tanpa embel-embel start, end, top ataupun bottom. Sebagai contoh, saya ubah nama kelasnya menjadi m-3. Dan sekarang marginnya ada di keempat sisi baris danger.

Cara untuk menggunakan margin ini bisa kita terapkan juga untuk padding. Sebagai contoh, saya copy keenam baris pertama. Dan saya paste lagi di bagian akhir bodi. Namun nama kelasnya saya ganti menjadi ps-0 hingga ps-5. Dan sekarang kita lihat di browser sudah ada tambahan 6 baris baru yang memiliki padding di sebelah kiri masing-masing baris ya. Sehingga tulisan konten pada baris menjadi menjorok ke kanan. Namun warna background tetap dimulai dari paling kiri.

Nantinya teman-teman bisa mencoba sendiri untuk menggunakan padding di bagian top, bottom ataupun end. Disini saya hanya menambahkan contoh untuk penggunaan padding di keempat sisinya. Kita ubah nama kelas ps menjadi p. Artinya padding akan diterapkan di keempat sisi baris. Dan bisa kita lihat hasilnya semakin kebawah, ukuran barisnya menjadi semakin besar karena ada penambahan padding di keempat sisinya.

Selanjutnya kita akan membahas mengenai nilai auto, yang hanya bisa digunakan pada margin. Jadi nilai auto ini tidak bisa digunakan pada padding ya. Sebagai contoh, kita copy lagi baris primary pertama kita, dan kita paste di bagian akhir body.

Nah, agar bisa melihat hasil dari nilai auto, maka kita perlu mengubah lebar baris menjadi lebih kecil. Untuk itu kita bisa membuka dokumentasi Bootstrap dan kita lihat ke Sizing Utility. Disini bisa dibaca bahwa kita bisa mengubah ukuran lebar elemen menjadi 25% dari parentnya, dengan menggunakan kelas w-25. Kita kembali ke kode HTML kita. Dan kita tambahkan kelas w-25 pada tag baru kita. Dan sekarang ukuran baris terakhir kita hanya seperempat layar.

Sekarang kita bisa mengubah nilai margin start kita, dari yang tadinya 0 menjadi auto. Jadi nama kelasnya saya ubah menjadi ms-auto. Dan hasilnya, sekarang baris primary kita menjadi rata kanan ya. Karena semua sisa ruang pada baris tersebut secara otomatis diubah menjadi margin di sebelah kiri div.

Kita juga bisa menggunakan nilai auto untuk margin end. Kalau saya ganti kelasnya menjadi me-auto, maka kotak primary menjadi rata kiri. Dan kita juga bisa menggunakan nilai auto untuk kedua sisi kiri dan kanan. Jadinya di dalam tag primary ini saya tambahkan kedua kelas ms-auto dan me-auto. Dan hasilnya, kotak primary menjadi berada di tengah baris.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.