Oke, sekarang kita buka source code index.html. Kita scroll ke bawah ke tag section fitur. Disini kita sudah memiliki kontennya. Kita hanya perlu melengkapi nama kelas pada tag-tag tertentu.

Nah, bagi teman-teman yang sudah belajar Bootstrap Responsive Grid System, tentunya masih ingat ya urutan dari kelas yang harus kita gunakan. Yang pertama adalah kelas container. Yang kedua adalah row. Dan yang ketiga adalah kolom atau col.

Kita mengatur sifat responsive dari situs kita dengan melalui kelas kolom. Pada ukuran browser yang paling kecil, kita hanya menampilkan satu kolom per baris. Artinya kolom kita menggunakan seluruh unit yang ada pada baris, yaitu 12. Kita ganti nama kelas col menjadi col-12.

Pada ukuran browser menengah, kita menampilkan dua kolom per baris. Jadi nilai unitnya adalah 12 dibagi 2, yaitu 6. Dan kita gunakan breakpoint md. Jadi kita tambahkan kelas col-md-6.

Dan pada ukuran browser besar, kita menampilkan tiga kolom per baris. Nilai unitnya adalah 12 dibagi 3, yaitu 4. Dan kita gunakan breakpoint xl. Jadi kita tambahkan kelas col-xl-4. Kita tambahkan juga kelas text-center agar seluruh gambar dan teks berada di bagian tengah kolom.

Kita copy kelas kolom kita ke kelima kolom lainnya. Dan kita lihat hasilnya di browser. Nah, sekarang tampilan konten fitur kita sudah responsive ya. 3 kolom per baris pada browser ukuran besar. 2 kolom per baris pada browser ukuran menengah. Dan 1 kolom per baris pada browser ukuran kecil.

Selanjutnya kita perlu menambahkan beberapa kelas lagi, agar tampilannya menjadi lebih rapi dan lebih enak untuk dilihat. Kita perlu menambahkan padding di bagian kiri dan kanan kolom. Dan kemudian kita perlu menambahkan margin di bagian bawah kolom.

Kita kembali ke kolom pertama. Untuk padding di sebelah kiri, kita tambahkan kelas ps-5. Kemudian untuk padding di sebelah kanan, kita tambahkan kelas pe-5. Dan untuk margin di sebelah bawah kita tambahkan mb-5. Kita copy ketiga kelas ini ke kelima kolom lainnya. Nah, sekarang kolom kita menjadi lebih rapi karena tidak berdempetan satu sama lain.

Selanjutnya kita akan mengatur tampilan dari tag image. Pertama kita bisa menambahkan border tipis di sekeliling gambar, dengan menggunakan kelas img-thumbnail. Kita coba tambahkan di kolom pertama. Nah sekarang kita bisa melihat bahwa di sekeliling gambar pertama ada border tipis ya.

Kemudian kita mau agar gambar ini menjadi bulat. Kita bisa tambahkan kelas rounded-circle. Sekarang gambar kita berubah menjadi bulat, dan yang ditampilkan hanya bagian tengahnya saja. Jadi bagian sudut dari gambar menjadi tidak kelihatan.

Dan yang terakhir ingin kita atur adalah ukuran dari gambar. Karena kalau ukuran gambar seperti ini terlalu besar. Kita tambahkan kelas buatan kita sendiri, yaitu img-fitur. Kita buka kode style.css. Kita tambahkan selector kelas img-fitur. Dan kita tambahkan properti width dengan nilai 150 pixel. Kita simpan dan refresh browser dan sekarang ukuran gambar kita menjadi lebih proporsional dengan tulisannya.

Kita copy kelas pada tag image ke kelima image berikutnya. Kita simpan dan refresh browser. Dan kita pun sudah berhasil menyelesaikan latihan pada video ini.

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.