Cara Mudah Membuat Bottom Navbar Seperti Instagram Dengan Bootstrap 5

Pada artikel ini saya akan membagi artikel yang hendak mengulas mengenai bagaimana sich langkah membuat bottom navbar seperti instagram atau umumnya mobile app dengan bootstrap 5. pada eksperimen di artikel ini, kita akan mengawali dari 0 yakni dengan membuat file html baru dengan starter template dari bootstrap.

Saat sebelum berlanjut ke beberapa langkah pembikinan bottom navbar dengan bootstrap 5, kita harus tahu lebih dulu mengapa sich kita perlu membuat bottom navbar situs untuk versus mobile ? Maka karena ada bottom navbar akan mempermudah pemakai untuk beralih halaman karena status navbar dengan jempol pemakai (yang umumnya dipakai untuk tekan) lebih dekat, berlainan bila button navbar ada di sudut atas piranti seperti umumnya situs yang ada sekarang ini, pemakai kesusahan dalam menyaksikan menu navigasi yang berada di website. Kehadiran bottom navbar benar-benar baik untuk pemakai experience.

Lalu, mengapa di beberapa situs belum mengaplikasikan bottom navbar ? tidak seluruhnya web harus mengaplikasikan bottom navbar, bergantung sasaran rutinitas audiens dan audiens. Peluang, karena sasaran audiencenya ialah pemakai yang mencari panduan programming yang umumnya jika orang program, piranti yang dipakai ialah piranti yang memiliki lebar monitor large atau lebar seperti netbook, PC dan sebagainya, oleh karena itu banyak situs belum juga mengaplikasikan bottom navbar, tetapi peluang bila waktunya datang akan mengaplikasikan bottom navbar.

Bottom navbar biasa kita temui di situs atau program e-commerce, media sosial seperti twitter, instagram. Nach, kesempatan ini saya akan ajak rekan-rekan belajar bagaimanakah cara membuat bottom navbar seperti instagram dengan bootstrap versus 5. Marilah kita awali beberapa langkahnya.

Apa yang penting disiapkan ?

Teks editor (Saya memakai Visual Studio Code)
Browser (Saya memakai Google Chrome)
Jaringan Internet (Optional)

Mempersiapkan File HTML

Langkah awal untuk membikin bottom navbar seperti instagram dengan bootstrap ialah kita perlu mempersiapkan atau membuat file HTML baru. Silakan buat file HTML bernama file index.html, selanjutnya copy code starter bootstrap berikut ini dan paste pada file HTML yang barusan dibuat.

Dari code di atas, kita akan memakai bootstrap CSS versus CDN dan bootstrap bundel with popper versus CDN juga. Silakan save, lalu coba membuka di browser. Apa yang diperlihatkan ? kosong ? ya memang kita cuman baru membuat starter template, belum membuat penampilannya. Saat ini, silakan copy code berikut ini dan paste di bawah tag <body> .

Dengan code di atas, saat ini kita telah memiliki penampilan navbar tetapi saat pada monitor kecil navbar masih di status atas sama dalam gambar di bawah ini.

Supaya saat monitor memiliki ukuran kecil navbar tidak diperlihatkan, kita perlu manambahkan class d-none d-lg-block pada tag navbar yang maknanya hebat navbar akan diselinapkan disemua ukuran monitor terkecuali pada monitor memiliki ukuran large atau besar. Saat ini tag navbar kita bisa menjadi mirip contoh di bawah ini.

Saat ini coba save dan membuka pada browser sama ukuran monitor mobile, karena itu navbar tidak diperlihatkan lagi. Selanjutnya bagaimanakah cara supaya navbar tampil di bawah ? nach, saat ini coba copy kode berikut ini dan paste pas di bawah </nav> yang telah dibikin sebelumnya.

Penting diingat pada code bottom navbar di atas, kita menambah class border-top, navbar-expand, d-md-none, d-lg-none, d-xl-none, fixed-bottom, class-class itu perannya apa ? silahkan baca penuturannya pada tabel di bawah ini.

Coba save dari peralihan yang sudah dilaksanakan barusan dan lihat di browser sama ukuran small atau kecil, karena itu penampilannya bakal jadi gambar di atas. Oke, sama ukuran monitor kecil, hebat navbar telah diselinapkan dan bottom navbar di tampilkan. Beberapa menu di bottom navbar masih berbentuk text, kita inginya menu navbar berbentuk ikon seperti pada instagram, apa jalan keluarnya ? Coba datangi di icon.getbootstrap.com, selanjutnya mencari keyword misalkan home.

Nach, kelak ada ikon seperti gambar di atas, click selanjutnya copy HTML atau svg karena kita akan memakai pilihan svg (bukan icon). Membuka file HTML kembali, dan paste code svg itu gantikan menu Home di section bottom navbar. Kerjakan kembali dengan cari ikon untuk search, add, profil dan shop. Keseluruhannya, nanti code bottom navbar akan seperti pada bawah ini.

Dengan code di atas, kita telah mengganti semua teks menu yang berada di bottom navbar dengan ikon seperti pada instagram memakai ikon dari bootstrap. Dengan code di atas, karena itu penampilan menu atau bottom navbar kita bisa menjadi seperti gambar di bawah ini.

Bagaimana ? telah kelihatan serupa dengan menu atau bottom navbar di instagram kan ? tinggal menambah contoh content saja supaya tidak kelihatan kosong. Silakan copy code berikut ini, selanjutnya paste di bawah tag atau di atas <script>.

engan menambahkan kode di atas, maka sekarang tampilan projek latihan membuat bottom navbar seperti instagram dengan bootstrap akan menjadi seperti gambar di bawah ini.

kode lengkap Index.html

Keseluruhannya code yang sudah kita bikin pada latihan membuat menu atau bottom navbar pada penampilan mobile seperti instagram dengan bootstrap 5 dapat disaksikan pada code di atas.

Demikian artikel ini kali, sampai di sini kita telah sukses menuntaskan atau membuat menu bottom navbar seperti pada instagram dengan bootstrap 5. Silakan rekan-rekan modifikasi atau improvisasi sesuai keperluan rekan atau kemauan. Bila ada anjuran, kritikan, saran atau apa saja itu yang ingin dibicarakan, silakan catat komentar di bawah ini.

Related Posts:

  • Cara Membuat USB Installer Windows 7 Hello Teman Semua, Windows 7 masih menjadi salah satu sistem operasi yang paling banyak digunakan oleh pengguna PC di seluruh dunia. Namun, ketika menginstal ulang Windows 7, biasanya kita akan…
  • Cara Instal PHP Hello Teman Semua, pada kesempatan kali ini admin akan membahas mengenai cara instal PHP. PHP adalah bahasa pemrograman yang umum digunakan untuk membuat website dinamis. Dengan menginstal PHP, Anda dapat…
  • Aplikasi Sadap WA Pasangan Tanpa Ketahuan (Update) Perubahan tehnologi info makin mempermudah untuk lakukan komunikasi. Satu diantaranya untuk pasangan yang jalani Hubungan jarak jauh ini sering membuat ingin tahu isi WA pasangan. Untuk mengetahuinya memakai aplikasi sadap…
  • Cara Instal Ulang Windows XP Hello Teman Semua, apakah kamu membutuhkan panduan cara instal ulang Windows XP? Jika iya, kamu berada di artikel yang tepat! Dalam artikel ini, admin akan memberikan panduan langkah-demi-langkah yang mudah…
  • Fitur Template Uji Coba Instagram, Kreator Dapat… Instagram sedang menguji fitur baru dari template Reel Instagram. Fitur ini memungkinkan kreator untuk membuat video dengan meminjam format dari video lain di platform.Merujuk pada The Verge, Senin (25/April 2023),…
  • cara menghitung pembagian di excel Hello Teman Semua, pada kesempatan kali ini kita akan membahas mengenai cara menghitung pembagian di Excel. Excel merupakan program yang sangat berguna untuk mengolah data dan melakukan perhitungan matematika, termasuk…
  • cara menambahkan halaman di excel Hello Teman Semua! Pada artikel kali ini, kita akan membahas tentang cara menambahkan halaman di Excel. Hal ini sangat penting jika kita ingin mengelola data dalam jumlah besar dan menghindari…
  • cara kunci cell di excel Hello Teman Semua! Apa kalian sering mengalami masalah saat bekerja dengan Excel? Salah satu masalah yang sering terjadi adalah ketika kita ingin mengunci sel atau cell di Excel agar tidak…
  • Cara Menginstal Sound Device Hello teman-teman, kali ini admin akan membahas tentang cara menginstal sound device. Seperti yang kita tahu, sound device adalah perangkat keras pada komputer yang berfungsi untuk mengeluarkan suara. Jadi, jika…
  • Cara Menginstal Visual Basic 6.0 Hello Teman Semua! Pada kesempatan kali ini, admin akan membahas tentang cara menginstal Visual Basic 6.0. Visual Basic 6.0 merupakan bahasa pemrograman yang dirilis pada tahun 1998 oleh Microsoft. Bahasa…
  • Cara Install Windows 10 dengan Flashdisk Lewat BIOS Hello Teman Semua! Pernahkah kamu mengalami kesulitan saat ingin menginstal windows 10 pada laptop atau PC-mu? Jangan khawatir, karena admin akan memberikan panduan cara install windows 10 dengan menggunakan flashdisk…
  • Cara Install PUBG di Laptop Hello Teman Semua, kali ini admin akan membahas tentang cara install PUBG di laptop. Semakin banyak yang memainkan game ini, terutama setelah dirilisnya versi mobile, membuat para pemain semakin tertarik…
  • 3 Cara Melihat Postingan Instagram Tanpa Diketahui Instagram merupakan salah satu jejaring sosial yang banyak digunakan penggunanya untuk memposting foto atau video berbagai aktivitas yang mereka lakukan.Hal inilah yang terkadang membuat banyak pengguna merasa penasaran saat memposting…
  • Cara Install APK di iPhone Hello Teman Semua, di artikel kali ini admin akan membahas tentang cara install APK di iPhone. Sebelumnya, tentu saja kita perlu tahu terlebih dahulu apa itu APK. APK adalah singkatan…
  • Cara Instal Ulang Windows 8 Menggunakan Flashdisk Hello teman semua! Apakah Anda sedang mengalami masalah dengan sistem operasi Windows 8 dan ingin melakukan instal ulang? Jangan khawatir, admin akan memberi tahu cara instal ulang Windows 8 menggunakan…
  • Cara Install XAMPP Hello Teman Semua! Apa kabar hari ini? Kali ini kita akan membahas tentang cara menginstall XAMPP di komputer atau laptop kita. XAMPP sendiri adalah aplikasi yang dapat membuat komputer kita…
  • Cara Install Pip Python Hello Teman Semua, pada artikel kali ini admin akan membahas tentang cara install pip python dengan mudah dan cepat. Pip adalah sebuah package manager untuk bahasa pemrograman Python yang memudahkan…
  • Cara Instal Windows 11 Hello Teman Semua, artikel kali ini akan membahas tentang cara instal Windows 11. Sebelum kita mulai, pastikan kamu sudah memiliki file instalasi Windows 11 dan PC dengan spesifikasi yang memenuhi…
  • Cara Instal Win 8 dengan Flashdisk Hello, Teman Semua! Apakah kamu ingin menginstal Windows 8 menggunakan flashdisk? Tidak perlu khawatir, admin akan memberikan panduan lengkap untuk kamu.Kelebihan dan Kekurangan Menggunakan FlashdiskSebelum kita memulai panduan instalasi menggunakan…
  • Cara Install Laravel Hello Teman Semua! Kali ini, admin akan membahas tentang cara install Laravel. Laravel merupakan salah satu framework PHP yang banyak digunakan oleh developer karena memiliki banyak fitur dan mudah digunakan.…
  • Cara Instal Ulang Notebook Acer Hello Teman Semua, terkadang kita mengalami masalah dengan notebook Acer kita yang menyebabkan kita harus melakukan instal ulang sistem operasi. Nah, pada artikel kali ini admin akan memberikan tips dan…
  • Cara Instal Brush di Photoshop Hello teman semua, apakah kamu sedang mencari cara untuk menginstal brush di aplikasi Photoshop? Jangan khawatir, admin akan memberikan panduan lengkap untuk kamu. Brush adalah salah satu fitur penting dalam…
  • Cara Install Linux Debian di Virtual Box Hello Teman Semua, pada artikel kali ini kita akan membahas tentang cara install Linux Debian di Virtual Box. Linux Debian adalah salah satu sistem operasi open-source yang memiliki keamanan tinggi…
  • Cara Install Font di Windows 10 Hello Teman Semua, kali ini admin ingin berbagi tips tentang cara menginstal font di Windows 10. Menginstal font baru tentu bisa mempercantik tampilan dokumen atau desain kita. Namun, untuk pemula…
  • Cara Menginstal File di Laptop Hello Teman Semua, pada kesempatan kali ini admin akan membahas tentang cara menginstal file di laptop. Sebagai pengguna laptop, kita pasti seringkali membutuhkan aplikasi atau program tertentu yang harus diinstal…
  • Cara Menginstal Aplikasi InlisLite Hello Teman Semua, kali ini admin akan membahas tentang cara menginstal aplikasi InlisLite. InlisLite adalah aplikasi manajemen perpustakaan yang sangat populer di Indonesia. Aplikasi ini mudah digunakan dan memiliki banyak…
  • Cara Menginstal Office Hello teman-teman! Hari ini admin akan memberikan tutorial tentang cara menginstal office. Seperti yang kita tahu, Office adalah salah satu aplikasi yang berguna untuk keperluan kantor, belajar, bahkan untuk keperluan…
  • Cara Instal Word 2010 Hello Teman Semua! Pada kesempatan kali ini, admin akan membahas tentang cara instal Microsoft Word 2010. Microsoft Word 2010 adalah salah satu aplikasi pengolah kata yang sering digunakan untuk menulis…
  • Cara Menginstal Microsoft Word Hello Teman Semua, kali ini kita akan membahas tentang cara menginstal Microsoft Word. Salah satu aplikasi yang sangat penting bagi kita yang sering membutuhkan fitur pengolah kata dalam pekerjaan atau…
  • Cara Install PostgreSQL Hello, teman-teman! Pada artikel kali ini, admin akan membahas cara install PostgreSQL. PostgreSQL adalah sebuah sistem manajemen basis data relasional open source yang sangat powerful dan handal.Langkah 1: Download dan…