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.

Post Views: 2,043

Related Posts:

  • Begini Cara Mudah Buka Situs Tanpa Vpn Merubah DNS Tanpa Vpn DNS atau Domain Name System adalah sistem penamaan  hirarkis dan desentralisasi untuk komputer, layanan, atau sumber daya lain yang terhubung ke Internet atau jaringan pribadi. Dengan…
  • Kenapa Tidak Bisa Upload Foto di Google Form, Ini… Google Form merupakan sebuah layanan yang banyak dimanfaatkan dalam penelitian. Namun terkadang, responden mengalami kendala saat mengisi Google Form ini seperti tidak bisa upload foto. Lalu, kenapa tidak bisa upload…
  • Wajib Coba! 11 Aplikasi Whatsapp Mod (WA MOD) Terbaru 2023 Anda pasti sudah tahu bahwa aplikasi WhatsApp Mod telah hadir! Aplikasi WhatsApp Mod menawarkan berbagai fitur tambahan yang pasti akan membuat sesi chatting Anda lebih menyenangkan. Berikut panduan instalasi sederhana…
  • WhatsApp Fitur Keluar Dari Grup Diam-Diam Tanpa Ketahuan Kamu mungkin pernah merasa tidak nyaman berada di sebuah grup WhatsApp yang sangat mengganggu dan bising. Namun, saat ingin dari grup tersebut, kamu merasa tidak enak karena aplikasi akan memunculkan…
  • Ini Cara Mencairkan Keuntungan Saham dengan Gampang Cara mencairkan keuntungan saham jadi hal yang pasti benar-benar ingin dijumpai oleh investor pemula. Mencairkan saham sendiri di dunia investasi atau trading biasa disebutkan dengan penarikan dana atau withdraw. Melihat…
  • 7 Aplikasi Desain Baju Android Yang Cocok Untuk Desainer Mendesain baju kini jauh lebih mudah, dengan seiring berkembangnya teknologi mendesain baju tidak hanya bisa dilakukan menggunakan laptop atau PC. Tetapi juga bisa dilakukan menggunakan smartphone, dengan cara menggunakan aplikasi…
  • Whatsapp MOD: Link Download Terbaru (2021) Bagi Anda yang ingin memiliki tampilan WA yang lebih menarik dengan fitur keren, dapat memilih Whatsapp MOD terbaik untuk smartphone Anda. Whatsapp MOD adalah aplikasi WA yang telah dimodifikasi dari versi…
  • Download Aplikasi Bahasa Inggris Gratis yang Harus Coba Mengunduh aplikasi Bahasa Inggris di ponsel merupakan salah satu cara agar kompetensi serta penguasaan bahasa bisa lebih baik. English sendiri digunakan secara internasional dan penguasaannya sangat bermanfaat bagi kehidupan. Sebab…
  • Cara Reset Windows 7 Tanpa Install Ulang Hello Teman Semua! Apakah kamu sedang mengalami masalah pada Windows 7? Apakah kamu ingin mereset Windows 7 kamu tanpa harus melakukan install ulang? Jangan khawatir, karena admin akan membahas cara…
  • Apa Itu Web Hosting? Pengertian Hosting Serta Jenis… Dalam membangun sebuah website, maka Anda perlu melakukan perencanaan secara matang, salah satunya pemilihan hosting. Hosting sendiri merupakan tiangnya website. Dengan demikian website dapat dilihat diakses secara bebas atau para…
  • Piratebay Proxy List dan Mirror (Update 2023) The Pirate Bay merupakan situs download file paling populer di dunia. Disini kamu dapat menemukan berbagai jenis torrent untuk diunduh. Situs Pirates Bay memiliki database link torrent untuk berbagai media.…
  • Daftar Nomor Call Center (Bank, Nomor Darurat,… Mengutip ulasan pada Wikipedia yang menyebutkan bahwa Bank adalah sebuah lembaga intermediasi keuangan yang didirikan atas kewenangan untuk meminjamkan uang, menerima uang tabungan, serta menerbitkan promes atau banknote. Dalam hal…
  • Cara Instal APK di Android Hello Teman Semua, kali ini admin akan membahas tentang cara menginstal APK di smartphone Android kamu. Sebelum kita masuk ke pembahasan, mari kita kenali terlebih dahulu apa itu APK.Apa itu…
  • 4 Situs Baru Pengganti Samehadaku (Update Link) Bagi penggemar One Piece dan Naruto, pasti sudah familiar dengan situs Samehadaku yang merupakan situs nonton anime dari berbagai genre secara gratis. Sejak dilakukan pemblokiran oleh pemerintah, situs utama Samehadaku…
  • Ini Dia 3 Aplikasi Edit Video Di Laptop Gratis dan Mudah Aplikasi edit video di laptop – saat ini kebutuhan konten sudah seperti makanan sehari-hari, dimana hampir setiap orang punya sosial media dan mengupload beragam konten menarik. Tentu saja semua perangkat…
  • 5 Cara Upload File ke Link Google Drive Orang Lain Ada beberapa cara upload file ke link Google Drive orang lain. Google Drive bisa dimanfaatkan sebagai ruang penyimpanan pihak ketiga yang memiliki kapasitas sebesar 15 GB dan gratis. Akan tetapi…
  • Mudah dan Aman? Cara Nonton Film di LK21, Hibur diri… Siapa sih yang nggak suka nonton film? Kegiatan seru ini udah jadi bagian nggak terpisahkan dari hiburan zaman sekarang. Nah, salah satu tempat keren buat nonton beragam film tuh LK21.…
  • Aplikasi Perekam Suara iPhone Terbaik Wajib Punya! Vpn.co.id - Aplikasi perekam suara iphone terbaik ini bermanfaat sekali untuk merekam audio dengan kualitas tinggi untuk berbagai keperluan. iPhone telah menjadi alat yang sangat penting dalam kehidupan kita. Selain…
  • 10 Mouse Logitech Wireless Murah yang Wajib Anda Coba Mouse Logitech Wireless Murah - Mouse ini merupakan salah satu perangkat pembantu komputer maupun laptop yang berguna untuk memindahkan kursor. Bentuknya yang serupa dengan tikus membuat alat ini disebut dengan…
  • Komentar Tak Enak Seorang Netizen Bikin Kiper… Komentar tidak senonoh dari netizen membuat kiper tim Persiga marah itu, dan istrinya dilecehkan. Komentar warganet di akun Instagramnya membuat kiper Persija Jakarta Andreitani Ardiasa murka. Andrettani menganggap komentar itu…
  • Bagaimana Cara Mengubah Google Form Ke Word? Seperti yang diketahui, Google Form memiliki segudang manfaat. Apalagi di masa pandemi yang pembelajaran ataupun bekerja banyak yang menggunakan sistem work from home. Ketika Anda memiliki keperluan menggunakan Google Form…
  • Cara Install Aplikasi di iPhone Hello Teman Semua, saat ini smartphone iPhone sudah menjadi salah satu gadget yang sangat populer di seluruh dunia. Dengan berbagai fitur dan aplikasi yang tersedia, membuat iPhone semakin banyak digunakan…
  • Cara Mudah Mengonversi File Word Ke PDF Apakah Anda sedang kuliah atau bekerja, Anda mungkin berurusan dengan berbagai jenis dokumen. Dua format dokumen yang paling umum digunakan adalah Word dan PDF. Kedua format ini berkisar dari tugas…
  • Mudah! Cara Akses Situs Nonton Film Online Gratis… Mengenang kembali nostalgia menonton film yang sangat menyenangkan, beberapa orang dapat merasakan kesenagan ini dengan menonton film secara online secara gratis. Dengan menonton film online, kamu bisa melihat film baru…
  • Tips Jitu dan Cara Agar Google Form Tidak Bisa… Google Form merupakan salah satu produk Google. Dimana Anda dapat membuat semua formulir dan menyebarkannya secara online. Anda tidak lagi membutuhkan berlembar-lembar kertas serta berkeliling untuk menyebarkan formulir, sangat canggih…
  • 9 Fitur Terbaru Instagram yang Dapat Anda Nikmati Fitur terbaru Instagram selalu ditambahkan setiap tahun. Inilah salah satu alasan mengapa platform sosial media satu ini punya pengguna yang terus bertambah. Setiap pengguna pada akhirnya mendapatkan pengalaman bersosial media…
  • 7 Aplikasi Untuk Menyimpan Story Instagram, Aman dan Mudah Pada Instagram terdapat fitur story untuk berbagi momen sementara. Namun story hanya dapat bertahan selama 24 jam. Disisi lain, Instagram juga tidak menyediakan fungsi untuk menyimpan story dari orang lain.…
  • 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 10 dengan Flashdisk Hello Teman Semua, kali ini admin akan membahas tentang cara instal ulang Windows 10 dengan menggunakan flashdisk. Hal ini bisa kita lakukan apabila terjadi masalah pada sistem operasi yang tidak…
  • Kenali Cara Investasi Reksadana di Bibit dan… Saat ini telah banyak ada program yang sediakan reksadana, terhitung Bibit, yang sekarang sering dipakai oleh investor. Cara investasi reksadana di Bibit termasuk cukuplah gampang karena di dalam aplikasinya ada…