Sebelumnya kita sudah membuat bagian header jumbotron dibagian paling atas tepat dibawah menu navigasi, sekarang kita akan lanjutkan dengan membuat bagian Tentang Saya / Tentang Kami tepat dibawah header. Selain itu, kita juga membuat bagian My Skills dengan memanfaatkan panel Bootstrap.

Tentang Kami

Biasanya pada bagian Tentang Kami ini di isi dengan foto profil / logo dan teks paragraf yang menjelaskan tentang situs ini secara singkat dan jelas. Pada bagian pertama kita akan menerapkan judul Tentang Kami terlebih dahulu yang mana judul ini dibuat menggunakan tag h1, supaya tidak terlalu polos kita tambahkan icon user disebelah kirinya menggunakan span ikon dari Bootstrap (glyphicon) dan semua ini dibungkus dengan col-sm-12 seperti ini:

<div class="container">
  <div class="row">
    <div class="col-sm-12 judul text-center">
      <h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
    </div>
  </div>
  </div>
</div>

Jika sebelumnya kita membuat kolom menggunakan col-md kali ini kita akan membuatnya dengan col-sm, md artinya medium sedangkan sm artinya small. Jadi, ketika diatur col-sm-12 artinya di akan tetap full baris pada perangkat kecil. Untuk ikon glypihcon sendiri bisa kalian temukan disini dan pilih ikon yang lebih disukai.

Seperti biasa kita tambahkan nama class baru didalamnya untuk digunakan dalam pengeditan style di CSS nya nanti, disini diberi nama class judul. Pada bagian col-sm-12 ini juga terdapat class lain yaitu text-center yang artinya tulisan yang ada didalam kolom ini akan berposisi ditengah, silahkan Save dan lihat hasilnya !

Sekarang, kita buat baris baru setelah penutup row diatas yang mana baris baru ini di isi dengan 2 kolom yang memiliki lebar berbeda. Kolom pertama kita buat sedikit lebih kecil dan di isi dengan foto profil atau logo sedangkan kolom satunya lagi kita buat lebih lebar dan di isi dengan beberapa kalimat pengenalan Tentang Kami.

<div class="container">
  <div class="row">
    <div class="col-sm-12 judul text-center">
      <h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-8"></div>
  </div>
</div>

Perhatikan col-md yang dibuat memiliki nilai berbeda artinya tidak memiliki lebar yang sama, silahkan tentukan ukuran sesuai selera kalian yang penting jumlah dari keduanya adalah 12 misalnya  7 & 5 atau 9 & 3.

Pada kolom pertama yang kecil akan di sisipkan gambar, silahkan siapkan gambarnya terlebih dahulu. Saya simpan gambar di dalam folder media/image/foto/, maka folder-folder tersebut menjadi root dalam pemanggilan file gambar disini:

<div class="container">
  <div class="row">
    <div class="col-sm-12 judul text-center">
      <h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <img src="media/image/foto/foto1.jpg" class="img-responsive">
    </div>
    <div class="col-md-8"></div>
  </div>
</div>

Jangan lupa tambahkan class img-responsive didalam tag img nya supaya gambar tersebut menjadi responsive (rapih tidak berantakan), class img-responsive ini merupakan class yang dibuat oleh Bootstrap untuk membuat gambar menjadi responsive.

Selanjutnya pada col-sm-8 ini kita masukkan paragraf sebagai penjelasan dari Tentang Kami:

<div class="container">
  <div class="row">
    <div class="col-sm-12 judul text-center">
      <h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <img src="media/image/foto/foto1.jpg" class="img-responsive">
    </div>
    <div class="col-md-8">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    </div>
  </div>
</div>

Ini hanya contoh paragraf saja, silahkan masukkan kaliam yang sesungguhnya supaya terlihat lebih real. Save dan lihat hasilnya !

? Jika posisi atau tinggi antara gambar dan paragraf tidak sama dan ingin di samakan silahkan perpendek / perpanjang paragrafnya atau bisa juga mengedit gambarnya terlebih dahulu di aplikasi pengedit foto atau edit langsung di style CSS nya.

Sepertinya bagian atas judul Tentang Kami masih terlalu dekat jarak atas dan bawahnya, inilah fungsinya class judul yang tadi kita terapkan, sekarang kita atur di CSS nya:

.judul h1 {
    margin: 3% 0;
    color: #c41617;
}

Code ini memberi jarak atas bawah judul tersebut dan memberikan warna merah, silahkan sesuaikan gayanya sesuai keperluan. Save dan lihat hasilnya ! Sekarang sudah terlebih lebih rapih dari sebelumnya.

My Skills

Bagian selanjutnya dibawah Tentang Kami kita buat bagian My Skills yang mana bagian ini dibuat menggunakan panel yang kotak kotak grid dan didalamnya terdapat ikon Bootstrap + teks. Pertama, kita buat kerangka utamanya dulu dengan container-fluid:

<div class="container-fluid">
  <div class="col-sm-12 judul text-center">
    <h1>My Skills</h1>
  </div>
</div>

container-fluid ini sama seperti bagian header yang dibuat sebelumnya, artinya lebar dari baris ini full sampai sisi pinggir kanan dan kiri sedangkan container itu tidak full hanya meng-kotak dibagian tengah-tengah situs. Seperti biasa kita masukkan class baru supaya dapat mengedit bagian ini nanti di CSS dan disini namanya sama dengan yang sebelumnya yaitu class judul.

Selanjutnya, kita buat row baru dan didalamnya di isi dengan 4 buah col- kecil:

<div class="container-fluid">
  <div class="col-sm-12 judul text-center">
    <h1>My Skills</h1>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
  </div>
</div>

Perhatikan, kenapa ada 2 col- didalam satu div ini ? col- yang pertama itu adalah –md– sedangkan yang kedua adalah –sm-. artinya ketika layar / perangkat yang digunakan berukuran medium akan membentuk menjadi col berukuran 3 sedangkan ketika dibuka di perangkat kecil akan membentuk menjadi col berukuran 6. Jika berukuran 3 artinya akan menampilkan 4 dalam satu baris sedangkan jika berukuran 6 akan menampilkan 2 saja dalam 1 baris.

Sekarang, masukkan panel yang sudah disediakan oleh Bootstrap didalam semua 4 col- tersebut:

<div class="container-fluid">
  <div class="col-sm-12 judul text-center">
    <h1>My Skills</h1>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center"></div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center"></div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center"></div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center"></div>
      </div>
    </div>
  </div>
</div>

Pada bagian panel-body ini saya terapkan class text-center supaya text yang ada didalamnya berposisi ditengah, jika tidak mau silahkan hapus aja.

Sekarang, saya akan membuat ikon dengan tag h1 kemudian dibawahnya di isi judul dengan tag h2 dan dibawahnya lagi di isi dengan presentase skill menggunakan tag p. Jadi seperti ini:

<div class="container-fluid">
  <div class="col-sm-12 judul text-center">
    <h1>My Skills</h1>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></h1>
          <h2>Skill 1</h2>
          <p>90%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span></h1>
          <h2>Skill 2</h2>
          <p>85%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></h1>
          <h2>Skill 3</h2>
          <p>80%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-star" aria-hidden="true"></span></h1>
          <h2>Skill 4</h2>
          <p>75%</p>
        </div>
      </div>
    </div>
  </div><!-- akhir class row skill pertama-->
  <div class="row">
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-film" aria-hidden="true"></span></h1>
          <h2>Skill 1</h2>
          <p>90%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></h1>
          <h2>Skill 2</h2>
          <p>85%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-off" aria-hidden="true"></span></h1>
          <h2>Skill 3</h2>
          <p>80%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></h1>
          <h2>Skill 4</h2>
          <p>75%</p>
        </div>
      </div>
    </div>
  </div>
</div>

Save dan lihat hasilnya !

Masih bingung ? Lihat : Video tutorial cara membuat template Bootstrap Part 3.

Perhatikan, disini ada 8 panel sedangkan tadi hanya 4. Silahkan copy semua mulai dari class row sampai penutup class row tersebut dan paste dibawah penutup class row tersebut maka menjadi ada 2 row masing-masing memiliki 4 col- jadi semua ada 8 col dan 2 row.

Ini supaya terlihat lebih banyak aja, kalo cuma mau 1 row alias 4 col juga tidak apa-apa. Mungkin kalo mau lebih banyak bisa lakukan hal seperti diatas sesuai jumlah row yang diinginkan.

Setelah menyelesaikan part 3 ini, silahkan lanjut ke part 4 atau lihat kembali ke part 2.

Selamat mencoba !