Setelah menyelesaikan tutorial dari part 1 sampart 8 tentu sudah banyak hal baru yang dipahami kan ? Jadi, pasti lebih gampang pahami penjelasan-penjelasan di part ini dan part berikutnya, kali ini kita akan tambahkan section / bagian Our Partner atau Our Client dibagian bawah slider yang sudah dibuat di part sebelumnya.

Seperti pada umumnya, Our Partner ini biasanya menampilkan logo-logo perusahaan. Jadi, silahkan siapkan logo-logo perusahaan terlebih dahulu yang akan ditampilkan dibagian ini, disini saya sudah siapkan folder logo-perusahaan didalam folder media >> images yang mana logo-logo ini akan saya tampilkan di bagian Our Partner. Karena logo-logo ini akan ditampilkan dalam ukuran kecil, usahakan logo-logo tersebut memiliki ukuran square supaya terlihat rapih.

Menampilkan di Perangkat md

Silahkan salin dan tempelkan kode berikut dibawah bagian Testimonial yang sudah dibuat pada part berikutnya:

<div class="container our-partners hidden-xs hidden-sm">
  <div class="col-xs-12 judul-our-services">
    <h2 class="text-center">Our Partners</h2>
  </div>
  <div class="row">
    <div class="col-md-1">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/5.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/6.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/7.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/8.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
  </div>
</div>

Bagian ini kita menggunakan container dan seperti biasa tambahkan class custom untuk supaya kita dapat mengedit bagian ini pada CSS dengan memanggil class custom tersebut, perhatikan disini terdapat hidden-xs dan hidden-sm, apa ni artinya ? Ini adalah class Bootstrap yang disediakan untuk menyembunyikan bagian di perangkat kecil seperti HP (hidden-xs, extra small) dan perangkat sedang seperti tablet (hidden-sm, small).

Kenapa kita sembunyikan ? Saya hanya ingin menjelaskan pada teman-teman bagaiman cara menyembunyikan bagian pada perangkat tertentu, nanti kita buat kode seperti ini lagi dibawahnya untuk bagian perangkat xs dan sm, jadi saya bisa menjelaskan banyak hal.

Selanjutnya, jangan lupa berikan judul dengan tag h2 supaya sama dengan judul-judul bagian lain yang pernah kita buat di part-part sebelumnya. Dan seperti biasa judul ini dibungkus dalam div yang memiliki class custom, disini saya pakai class yang pernah kita pakai di part sebelumnya yaitu class-judul-ourservice karena style-nya bakal sama untuk bagian ini jadi gak perlu bikin lagi. Kalo mau bikin lagi juga silahkan, jangan lupa atur di CSS-nya juga.

Sedangkan untuk gambar / logo perusahaan, kita tampilkan dengan tag img seperti biasa menampilkan gambar tapi kita bungkus dulu dengan col-md. Disini saya menggunakan col-md-1 artinya kita bisa membuat sampai 12 buah col-md-1 karena Bootstrap menyediakan perbarisnya 12 col-md, masih ingat kan tentang ini ? Kalo lupa, silahkan baca lagi part-part sebelumnya.

Oya, jangan lupa tambahkan class img-responsive didalam tag img-nya supaya gambar menjadi responsive menyesuaikan ukuran perangkat. Dalam tag img silahkan panggil direktori gambar / logo yang sudah kita siapkan tadi diawal, lupa lagi cara menyisipkan gambar di HTML ? Baca lagi tutorialnya disini.

Catatan: Untuk mendapatkan hasil yang lebih bagus, saya sarankan menggunakan gambar transparan (PNG).

Sekarang, kita tambahkan dulu CSS untuk bagian ini:

.our-partners {
    margin-bottom: 5%;
}

Disini kita berikan jarak (margin) bawah saja, karena secara bawaannya bagian ini pasti nempel dengan bagian bawah (footer) karena bagian atas sudah kita kasih jarak pada bagian Testimonial di part sebelumnya. Silahkan simpan dan lihat hasilnya ! Berhasil kan ? Tapi coba perkecil browser kamu, pasti hilang untuk perangkat tablet dan smarthpone, keren kan ?

Menampilkan di Perangkat sm

Jangan khawatir, sekarang kita buat satu lagi bagian ini tapi hanya tampil di perangkat small dan extra small sebagai pengganti kode diatas. Silahkan buat kode seperti ini dibawah kode yang tadi:

<div class="container our-partners visible-sm">
  <div class="col-xs-12 judul-our-services">
    <h2 class="text-center">Our Partners</h2>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/5.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/6.jpg" class="img-responsive">
    </div>
  </div>
</div>

Sekarang kita buat bagian yang sama yaitu Our Partner tapi untuk perangkat small (sm) yang sudah kita sembunyikan sebelumnya, Perhatikan di baris sejajar dengan container, disitu terdapat visible-sm, apa artinya ? visible-sm artinya kita memerintahkan bagian ini untuk tampil HANYA di perangkat small seperti tablet.

Simpan dan lihat hasilnya !

Menampilkan di Perangkat xs

Sekarang, ketika browser di kecilkan akan tampil Our Partner versi small (sm) yang sudah kita buat, tapi masih belum tampil di smartphone (extra-small), maka dari itu kita buat lagi codingan untuk extra-small:

<div class="container our-partners visible-xs">
  <div class="col-xs-12 judul-our-services">
    <h2 class="text-center">Our Partners</h2>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/5.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/6.jpg" class="img-responsive">
    </div>
  </div>
</div>

Lihat, sekarang kita menggunakan visible-xs yang fungsinya memerintahkan bagian ini untu ktampil HANYA di perangkat extra-small. Simpan dan lihat hasilnya !

Kamu bisa pelajari lebih lanjut tentang hidden dan visible disini.

Lengkap sudah, sekarang bagian ini akan tampil di semua perangkat dengan konten yang sama tapi style-nya berbeda seperti yang kamu lihat pada xs dan sm kita membuatnya menggunakan col-xs-2 dan col-sm-2 artinya setiap perangkat menampilkan konten yang sama hanya gaya menampilkannya saja yang berbeda.

Oya, untuk bagian sm silahkan gunakan col-sm sedangkan untuk bagian xs silahkan gunakan col-xs, ini harus disesuaikan dengan dimana ia ditampilkan (jika kalian mengatur penampilan per perangkat seperti ini) jangan sampai salah karena tidak akan berfungsi.

Masih bingung ? Lihat : Video tutorial cara membuat website sendiri menggunakan Bootstrap.

Berhasil, sekarang kamu sudah memahami bagaiman cara menampilkan konten dengan pengaturan perangkat kustom menggunakan framework Bootstrap.

Selamat mencoba !

Jangan lupa untuk melanjutkan ke part berikutnya (terakhir) atau baca-baca lagi part sebelumnya (part 8).