Part 4 ASIDE - BAGAIMANA CARA MEMBUAT TEMPLATE BOOTSTRAP 4 SENDIRI

Assalaikum wr wb

Apa kabar teman sekalian, kali ini kita akan membahas tentang bagaimana cara membuat NavBar menggunakan Bootstrap 4 yang telah disediakan. Seperti yang kalian ketahui bahwa Bootstrap 4 menyediakan beberapa fitur css yang sudah ada dan juga responsive pada smartphone, jadi kita mudah dalam pembuatan template website.

Kali ini saya akan bahas tentang cara membuat konten menggunakan bootstrap 4, begitu banyak hal yang harus diperhatikan dalam pembuatan konten pada tutorial ini, perhatikan pembukaan atribut dan juga penutupnya contohnya seperti ini, <div class="aside"> ini adalah satu pembuka dalam sebuah struktur css <div> adalah penanda bahwa itu adalah awal dari  pembukaan dalam css, sedang kan tag </div> adalah menandakan bahwa itu adalah batas css yang dibuat sedang diluar tersebut berbeda css yang ada.

Hal-hal tersebut harus kita perhatikan karena itu jika tidak diperhatikan maka akan terjadi ketidak sesuaian struktur css atau tata letak template yang akan dibuat. Lihat gambar dibawah ini adalah contoh konten yang saya buat.

Versi Full

Versi Mobile

Ok langsung saja kita masuk kepembahasan tentang Bagaimana cara membuat Aside menggunakan bootstrap 4. Liat langkah dibawah ini bagaimana cara Bagaimana cara membuat Aside menggunakan bootrtrap 4.

1. Pertama seperti tutorial sebelumnya Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap kalian harus menyiapkan bahannya. Bagi teman yang belum mengikuti langkah awal silakan klik artikel ini Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap.
2. Langkah kedua anda kita masukan koding content dibawah tag penutup </div> sliderbar atau bisa didilat gambar dibawah ada tulisan <!-- Penutup Sliderbar--> kemarin letakan dibawahnya seperti contoh koding dibawah ini.
3. Lalu simpan dengan didalam folder yang sudah dibuat pada tutotial yang sebelumnya Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap dengan format namafile.html, setelah itu coba jalankan.

Beberapa koding untuk membuat Aside yang akan saya jelaskan fungsinya.

Seperti yang terlihat diatas saya akan menjelaskan beberapa koding yang utama dalam pembuatan konten menggunakan bootstrap 4, yang pertama adalah tag <div class="container-fluid text-center">, koding ini adalah yang pertama, container-fluid itu adalah sebuat struktur konten yang mewakili batas paging dll dalam css untuk memberi batas antara struktur yang lain. Bisa dilihat gambar ini. Ini adalah salah satu aside bagian kiri.

Dari gambar diatas bisa terlihat posisi content dikiri dan juga tulisan content tengah, kenapa tulisan kontent disebut ketengah, itu karena menggunakan class bootstrap 4 yaitu tag text-aligin maka posisi tulisan akan menjadi ketengah, kawan-kawan pasti bertanya bagaimana cara membedakan aside strukturnya yang ada coba lihat gambar ini.

Dari penjelasan yang ada diatas bisa kita lihat bahwa itu adalah struktuk ASIDE yang di kiri. Bagaimana teman-teman bisa mengerti, kemudian bisa kita kita lihat class col-sm-2 sidenav, tag ini berfungsi membuat tampilan akan menjadi responsive ketika dibuka pada smartphone. Tag class col-sm-2 artinya bagian layout berukuran small-2 pada ukuran pixel  tertentu maka ia akan menjadi responsive pada smartphone, kemudian sidenav jika diperhatikan warna pada konten abu-abu itu karena ada koding class sidenav, tag bootstrap 4 membuatnya menjadi ke abu-abuan.

Seperti yang sudah saya jelaskan mungkin kawan-kawan bisa mengerti, yah mungkin saya tidak bisa menjelaskan keseluruhan koding yang ada karena terlalu banyak. Mungkin saya akan menbuat kembali artikel dan menjelaskan satu persatu pada kesempatan yang akan datang.

Itulah pemaparan yang saya buat jika ada kata-kata yang salah saya mohon maaf saya akhiri, wasalamulaikum wr wb.