{"id":1418,"date":"2025-07-29T04:25:52","date_gmt":"2025-07-29T04:25:52","guid":{"rendered":"https:\/\/kompetenesia.com\/blog\/?p=1418"},"modified":"2025-07-29T04:25:53","modified_gmt":"2025-07-29T04:25:53","slug":"cara-menggunakan-bootstrap-5","status":"publish","type":"post","link":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/","title":{"rendered":"Cara Menggunakan Bootstrap 5"},"content":{"rendered":"\n<p>Bootstrap 5 adalah salah satu framework CSS paling populer yang digunakan oleh pengembang web di seluruh dunia. F<\/p>\n\n\n\n<p>ramework ini membantu Anda membangun tampilan website yang responsif, menarik, dan modern dengan lebih cepat. <\/p>\n\n\n\n<p>Artikel ini akan membahas secara lengkap cara menggunakan Bootstrap 5 terbaru, mulai dari instalasi hingga penggunaannya dalam proyek web Anda.<\/p>\n\n\n\n<p>Bagi pemula, belajar Bootstrap mungkin terasa membingungkan. Namun dengan pendekatan yang tepat, Anda akan menyadari bahwa Bootstrap sangat memudahkan proses pengembangan antarmuka. <\/p>\n\n\n\n<p>Yuk, kita pelajari langkah-langkah penting dalam menggunakan Bootstrap 5.<\/p>\n\n\n\n<p><a href=\"https:\/\/kompetenesia.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a> menjadi langkah penting bagi siapa pun yang ingin meniti karier di dunia teknologi dan pengembangan web.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#Apa_Itu_Bootstrap_5_dan_Apa_Bedanya_dengan_Versi_Sebelumnya\" >Apa Itu Bootstrap 5 dan Apa Bedanya dengan Versi Sebelumnya?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#1_Fokus_pada_Responsivitas\" >1. Fokus pada Responsivitas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#2_Komponen_Siap_Pakai\" >2. Komponen Siap Pakai<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#3_Utility_Class_yang_Fleksibel\" >3. Utility Class yang Fleksibel<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#Langkah_Awal_Cara_Menginstal_Bootstrap_5\" >Langkah Awal Cara Menginstal Bootstrap 5<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#1_Menggunakan_CDN\" >1. Menggunakan CDN<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#2_Mengunduh_File_Secara_Lokal\" >2. Mengunduh File Secara Lokal<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#3_Melalui_Package_Manager_npmyarn\" >3. Melalui Package Manager (npm\/yarn)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#Struktur_Dasar_HTML_dengan_Bootstrap_5\" >Struktur Dasar HTML dengan Bootstrap 5<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#1_Penggunaan_Container_dan_Grid_System\" >1. Penggunaan Container dan Grid System<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#2_Menambahkan_Navbar_Sederhana\" >2. Menambahkan Navbar Sederhana<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#3_Membuat_Tombol_dan_Komponen_Lain\" >3. Membuat Tombol dan Komponen Lain<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#Tips_dan_Trik_dalam_Menggunakan_Bootstrap_5\" >Tips dan Trik dalam Menggunakan Bootstrap 5<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#1_Gunakan_Utility_Class_untuk_Styling_Cepat\" >1. Gunakan Utility Class untuk Styling Cepat<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#2_Sesuaikan_Tema_dengan_Variabel_CSS\" >2. Sesuaikan Tema dengan Variabel CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#3_Optimalkan_Mobile-First_Design\" >3. Optimalkan Mobile-First Design<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#Kesalahan_Umum_saat_Menggunakan_Bootstrap_5\" >Kesalahan Umum saat Menggunakan Bootstrap 5<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#1_Tidak_Menyusun_Struktur_HTML_dengan_Benar\" >1. Tidak Menyusun Struktur HTML dengan Benar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#2_Mengabaikan_Dokumentasi_Resmi\" >2. Mengabaikan Dokumentasi Resmi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#3_Overwrite_CSS_Terlalu_Banyak\" >3. Overwrite CSS Terlalu Banyak<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#Menggabungkan_Bootstrap_5_dengan_JavaScript\" >Menggabungkan Bootstrap 5 dengan JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#1_Inisialisasi_Komponen_dengan_JavaScript\" >1. Inisialisasi Komponen dengan JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#2_Gunakan_Data_Attributes_untuk_Kemudahan\" >2. Gunakan Data Attributes untuk Kemudahan<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apa_Itu_Bootstrap_5_dan_Apa_Bedanya_dengan_Versi_Sebelumnya\"><\/span><strong>Apa Itu Bootstrap 5 dan Apa Bedanya dengan Versi Sebelumnya?<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bootstrap 5 hadir dengan berbagai peningkatan dibanding versi sebelumnya. Salah satu perbedaan mencolok adalah penghapusan jQuery, yang berarti performa bisa lebih ringan dan modern. Framework ini juga lebih fokus pada penggunaan CSS murni dan class utilitas.<\/p>\n\n\n\n<p>Sebelum masuk ke detail teknis, penting untuk memahami konsep dasar penggunaan framework ini. <\/p>\n\n\n\n<p>Anda tidak perlu menjadi expert untuk bisa mengikuti cara menggunakan Bootstrap 5 terbaru\u00a0karena strukturnya sangat ramah bagi pemula.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Fokus_pada_Responsivitas\"><\/span>1. <strong>Fokus pada Responsivitas<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Bootstrap dirancang untuk tampil baik di berbagai ukuran layar. Dengan sistem grid yang fleksibel, Anda bisa mengatur layout tanpa harus menulis banyak kode CSS manual.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Komponen_Siap_Pakai\"><\/span>2. <strong>Komponen Siap Pakai<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Bootstrap 5 menyediakan berbagai komponen seperti navbar, button, card, modal, dan masih banyak lagi yang bisa langsung digunakan hanya dengan menambahkan class tertentu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Utility_Class_yang_Fleksibel\"><\/span>3. <strong>Utility Class yang Fleksibel<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Anda bisa dengan cepat mengatur padding, margin, font, dan warna tanpa menulis CSS tambahan. Cukup gunakan class yang sudah tersedia.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Langkah_Awal_Cara_Menginstal_Bootstrap_5\"><\/span><strong>Langkah Awal Cara Menginstal Bootstrap 5<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Untuk mulai belajar cara menggunakan Bootstrap 5 terbaru, Anda perlu menginstalnya terlebih dahulu. Ada beberapa cara instalasi yang bisa Anda pilih sesuai kebutuhan proyek.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Menggunakan_CDN\"><\/span>1. <strong>Menggunakan CDN<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Ini adalah cara paling mudah. Anda hanya perlu menambahkan link CSS dan JS dari Bootstrap ke dalam tag dan sebelum tag pada HTML Anda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Mengunduh_File_Secara_Lokal\"><\/span>2. <strong>Mengunduh File Secara Lokal<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Anda bisa mengunduh file Bootstrap dari situs resminya dan menyimpannya dalam folder proyek. Cocok untuk proyek offline atau jika Anda ingin kontrol lebih penuh.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Melalui_Package_Manager_npmyarn\"><\/span>3. <strong>Melalui Package Manager (npm\/yarn)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Untuk proyek skala besar, instalasi melalui npm atau yarn sangat disarankan agar integrasi dengan tools lain lebih mudah.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Struktur_Dasar_HTML_dengan_Bootstrap_5\"><\/span><strong>Struktur Dasar HTML dengan Bootstrap 5<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Setelah Bootstrap terpasang, Anda bisa mulai membangun tampilan. Berikut adalah struktur HTML dasar yang menggunakan Bootstrap.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Penggunaan_Container_dan_Grid_System\"><\/span>1. <strong>Penggunaan Container dan Grid System<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gunakan class .container&nbsp;untuk membungkus konten utama dan atur layout menggunakan .row&nbsp;dan .col.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Menambahkan_Navbar_Sederhana\"><\/span>2. <strong>Menambahkan Navbar Sederhana<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Navbar bisa dibuat hanya dengan beberapa baris kode HTML. Bootstrap menyediakan struktur dan styling bawaan agar tampil menarik.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Membuat_Tombol_dan_Komponen_Lain\"><\/span>3. <strong>Membuat Tombol dan Komponen Lain<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dengan menambahkan class seperti .btn&nbsp;dan .btn-primary, Anda bisa membuat tombol dengan gaya profesional secara instan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tips_dan_Trik_dalam_Menggunakan_Bootstrap_5\"><\/span><strong>Tips dan Trik dalam Menggunakan Bootstrap 5<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Framework ini sangat powerful, namun Anda juga perlu beberapa trik agar penggunaannya lebih maksimal. <\/p>\n\n\n\n<p>Sebelum masuk ke H3, pahami bahwa kunci sukses adalah memahami dokumentasi dan mencoba langsung.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Gunakan_Utility_Class_untuk_Styling_Cepat\"><\/span>1. <strong>Gunakan Utility Class untuk Styling Cepat<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Alih-alih menulis CSS sendiri, manfaatkan utility class Bootstrap untuk margin, padding, font size, dan lainnya.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Sesuaikan_Tema_dengan_Variabel_CSS\"><\/span>2. <strong>Sesuaikan Tema dengan Variabel CSS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Bootstrap 5 mendukung CSS custom properties. Anda bisa menyesuaikan warna utama, font, dan lainnya sesuai brand Anda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Optimalkan_Mobile-First_Design\"><\/span>3. <strong>Optimalkan Mobile-First Design<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pastikan desain Anda mobile-friendly. Gunakan class yang mendukung responsivitas seperti col-md-6&nbsp;atau d-lg-none.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesalahan_Umum_saat_Menggunakan_Bootstrap_5\"><\/span><strong>Kesalahan Umum saat Menggunakan Bootstrap 5<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Meskipun mudah digunakan, tetap ada kesalahan umum yang sering terjadi saat mempelajari cara menggunakan Bootstrap 5 terbaru. Mari kita bahas agar Anda bisa menghindarinya.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Tidak_Menyusun_Struktur_HTML_dengan_Benar\"><\/span>1. <strong>Tidak Menyusun Struktur HTML dengan Benar<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Kesalahan seperti tidak menutup tag atau menaruh class pada elemen yang salah bisa menyebabkan tampilan berantakan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Mengabaikan_Dokumentasi_Resmi\"><\/span>2. <strong>Mengabaikan Dokumentasi Resmi<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Banyak pengguna langsung menyalin kode tanpa memahami fungsi class yang digunakan. Padahal dokumentasi Bootstrap sangat lengkap dan mudah dipahami.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Overwrite_CSS_Terlalu_Banyak\"><\/span>3. <strong>Overwrite CSS Terlalu Banyak<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Jika terlalu sering menimpa styling Bootstrap dengan CSS sendiri, maka kelebihan menggunakan framework ini jadi tidak terasa.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Menggabungkan_Bootstrap_5_dengan_JavaScript\"><\/span><strong>Menggabungkan Bootstrap 5 dengan JavaScript<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Meskipun Bootstrap 5 tidak lagi bergantung pada jQuery, Anda tetap bisa menggunakan komponen interaktif dengan bantuan JavaScript. Ini termasuk dropdown, modal, toast, dan lain-lain.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Inisialisasi_Komponen_dengan_JavaScript\"><\/span>1. <strong>Inisialisasi Komponen dengan JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Anda bisa menggunakan script bawaan atau menulis kode JS sendiri untuk mengaktifkan elemen-elemen Bootstrap seperti tooltip dan modal.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Gunakan_Data_Attributes_untuk_Kemudahan\"><\/span>2. <strong>Gunakan Data Attributes untuk Kemudahan<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Banyak fitur Bootstrap bisa diaktifkan cukup dengan menambahkan atribut seperti data-bs-toggle&nbsp;dan data-bs-target&nbsp;tanpa harus menulis script tambahan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span><strong>Kesimpulan<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Menguasai cara menggunakan Bootstrap 5 terbaru\u00a0akan memberi Anda keunggulan dalam mengembangkan website yang responsif dan profesional. <\/p>\n\n\n\n<p>Framework ini sangat cocok digunakan baik oleh pemula maupun pengembang berpengalaman karena dokumentasinya yang lengkap dan komunitasnya yang besar.<\/p>\n\n\n\n<p>Dari instalasi, struktur dasar HTML, penggunaan komponen, hingga integrasi JavaScript semua dapat Anda pelajari secara bertahap. Ingat, yang terpenting adalah praktik langsung dan eksplorasi. <\/p>\n\n\n\n<p>Dengan begitu, Anda akan semakin mahir membangun tampilan website yang menarik dan fungsional menggunakan Bootstrap 5.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap 5 adalah salah satu framework CSS paling populer yang digunakan oleh pengembang web di seluruh dunia. F ramework ini membantu Anda membangun tampilan website yang responsif, menarik, dan modern&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[134],"tags":[253],"class_list":["post-1418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer","tag-bootstrap","article","has-background","has-excerpt","has-avatar","has-author","has-date","has-comment-count","has-category-meta","has-read-more","has-post-media","thumbnail-"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Menggunakan Bootstrap 5 - kompetenesia<\/title>\n<meta name=\"description\" content=\"Menguasai cara menggunakan Bootstrap 5 terbaru\u00a0akan memberi Anda keunggulan dalam mengembangkan website yang responsif dan profesional.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Menggunakan Bootstrap 5 - kompetenesia\" \/>\n<meta property=\"og:description\" content=\"Menguasai cara menggunakan Bootstrap 5 terbaru\u00a0akan memberi Anda keunggulan dalam mengembangkan website yang responsif dan profesional.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/\" \/>\n<meta property=\"og:site_name\" content=\"kompetenesia\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-29T04:25:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-29T04:25:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-8-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/cf16e1029064f41849bbeb60e1994525\"},\"headline\":\"Cara Menggunakan Bootstrap 5\",\"datePublished\":\"2025-07-29T04:25:52+00:00\",\"dateModified\":\"2025-07-29T04:25:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/\"},\"wordCount\":780,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-8-2.png\",\"keywords\":[\"Bootstrap\"],\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/\",\"url\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/\",\"name\":\"Cara Menggunakan Bootstrap 5 - kompetenesia\",\"isPartOf\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-8-2.png\",\"datePublished\":\"2025-07-29T04:25:52+00:00\",\"dateModified\":\"2025-07-29T04:25:53+00:00\",\"description\":\"Menguasai cara menggunakan Bootstrap 5 terbaru\u00a0akan memberi Anda keunggulan dalam mengembangkan website yang responsif dan profesional.\",\"breadcrumb\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#primaryimage\",\"url\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-8-2.png\",\"contentUrl\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-8-2.png\",\"width\":600,\"height\":400,\"caption\":\"Cara Menggunakan Bootstrap 5 terbaru\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kompetenesia.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Menggunakan Bootstrap 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#website\",\"url\":\"https:\/\/kompetenesia.com\/blog\/\",\"name\":\"kompetenesia\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kompetenesia.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#organization\",\"name\":\"kompetenesia\",\"url\":\"https:\/\/kompetenesia.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-26-removebg-preview.png\",\"contentUrl\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-26-removebg-preview.png\",\"width\":821,\"height\":304,\"caption\":\"kompetenesia\"},\"image\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/cf16e1029064f41849bbeb60e1994525\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/kompetenesia.com\"],\"url\":\"https:\/\/kompetenesia.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Menggunakan Bootstrap 5 - kompetenesia","description":"Menguasai cara menggunakan Bootstrap 5 terbaru\u00a0akan memberi Anda keunggulan dalam mengembangkan website yang responsif dan profesional.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/","og_locale":"en_US","og_type":"article","og_title":"Cara Menggunakan Bootstrap 5 - kompetenesia","og_description":"Menguasai cara menggunakan Bootstrap 5 terbaru\u00a0akan memberi Anda keunggulan dalam mengembangkan website yang responsif dan profesional.","og_url":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/","og_site_name":"kompetenesia","article_published_time":"2025-07-29T04:25:52+00:00","article_modified_time":"2025-07-29T04:25:53+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-8-2.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#article","isPartOf":{"@id":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/"},"author":{"name":"admin","@id":"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/cf16e1029064f41849bbeb60e1994525"},"headline":"Cara Menggunakan Bootstrap 5","datePublished":"2025-07-29T04:25:52+00:00","dateModified":"2025-07-29T04:25:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/"},"wordCount":780,"commentCount":0,"publisher":{"@id":"https:\/\/kompetenesia.com\/blog\/#organization"},"image":{"@id":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#primaryimage"},"thumbnailUrl":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-8-2.png","keywords":["Bootstrap"],"articleSection":["Web Developer"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/","url":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/","name":"Cara Menggunakan Bootstrap 5 - kompetenesia","isPartOf":{"@id":"https:\/\/kompetenesia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#primaryimage"},"image":{"@id":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#primaryimage"},"thumbnailUrl":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-8-2.png","datePublished":"2025-07-29T04:25:52+00:00","dateModified":"2025-07-29T04:25:53+00:00","description":"Menguasai cara menggunakan Bootstrap 5 terbaru\u00a0akan memberi Anda keunggulan dalam mengembangkan website yang responsif dan profesional.","breadcrumb":{"@id":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#primaryimage","url":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-8-2.png","contentUrl":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-8-2.png","width":600,"height":400,"caption":"Cara Menggunakan Bootstrap 5 terbaru"},{"@type":"BreadcrumbList","@id":"https:\/\/kompetenesia.com\/blog\/cara-menggunakan-bootstrap-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kompetenesia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara Menggunakan Bootstrap 5"}]},{"@type":"WebSite","@id":"https:\/\/kompetenesia.com\/blog\/#website","url":"https:\/\/kompetenesia.com\/blog\/","name":"kompetenesia","description":"","publisher":{"@id":"https:\/\/kompetenesia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kompetenesia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/kompetenesia.com\/blog\/#organization","name":"kompetenesia","url":"https:\/\/kompetenesia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetenesia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-26-removebg-preview.png","contentUrl":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-26-removebg-preview.png","width":821,"height":304,"caption":"kompetenesia"},"image":{"@id":"https:\/\/kompetenesia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/cf16e1029064f41849bbeb60e1994525","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/kompetenesia.com"],"url":"https:\/\/kompetenesia.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/posts\/1418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/comments?post=1418"}],"version-history":[{"count":1,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/posts\/1418\/revisions"}],"predecessor-version":[{"id":1421,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/posts\/1418\/revisions\/1421"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/media\/1420"}],"wp:attachment":[{"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/media?parent=1418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/categories?post=1418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/tags?post=1418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}