Belajar Bootstrap 5

Latihan Membuat Bagian Fitur Situs Startup

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

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.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
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.