{"id":3337,"date":"2020-06-15T13:07:44","date_gmt":"2020-06-15T13:07:44","guid":{"rendered":"https:\/\/www.hostnic.id\/blog\/?p=3337"},"modified":"2020-06-15T13:08:13","modified_gmt":"2020-06-15T13:08:13","slug":"cara-menggunakan-bootstrap-4-di-website-secara-online","status":"publish","type":"post","link":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/","title":{"rendered":"Cara menggunakan Bootstrap 4 di Website secara Online"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3343\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/attachment\/download-6\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?fit=318%2C159&amp;ssl=1?v=1592226345\" data-orig-size=\"318,159\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"download\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?fit=318%2C159&amp;ssl=1?v=1592226345\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?resize=300%2C150&#038;ssl=1\" alt=\"\" width=\"300\" height=\"150\" class=\"aligncenter size-medium wp-image-3343\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?resize=300%2C150&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?w=318&amp;ssl=1 318w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Hallo sobat Hostnic..<\/p>\n<p>Kemarin kita pernah juga membahas <a href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/cara-menggunakan-bootstrap\" rel=\"noopener noreferrer\" target=\"_blank\">Cara menggunakan Bootstrap 4 di Website (Offline)<\/a> nah sekarang mimin akan kasih tau juga cara menggunakan Bootstrap secara online. Jadi kalian gak perlu repot-repot download Source Code nya dulu, tapi tinggal copas ajah hehehe.<br \/>\nDisini kita masih menggunakan Bootstrap versi terbaru ya yaitu versi 4 atau Bootstrap 4.<br \/>\nOke, langsung ajah yuk&#8230;<\/p>\n<h2><strong> Cara Penggunaan Bootstrap di Website <\/strong><\/h2>\n<ul>\n<li>Pertama kalian buat file index.html dimana saja sesuai kebutuhan sobat<\/li>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3339\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/attachment\/screenshot_4-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_4-1.png?fit=1024%2C729&amp;ssl=1?v=1592225452\" data-orig-size=\"1024,729\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_4\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_4-1.png?fit=1024%2C729&amp;ssl=1?v=1592225452\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_4-1.png?resize=300%2C214&#038;ssl=1\" alt=\"\" width=\"300\" height=\"214\" class=\"aligncenter size-medium wp-image-3339\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_4-1.png?resize=300%2C214&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_4-1.png?resize=768%2C547&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_4-1.png?w=1024&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<li>Kemudian sobat buka website Bootstrap 4 atau <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/getting-started\/introduction\/\" rel=\"noopener noreferrer\" target=\"_blank\">disini<\/a><\/li>\n<li>Copy CSS dan JS ke dalam file index.html sobat<\/li>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3340\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/attachment\/screenshot_6-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_6-1.png?fit=1024%2C728&amp;ssl=1?v=1592225753\" data-orig-size=\"1024,728\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_6\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_6-1.png?fit=1024%2C728&amp;ssl=1?v=1592225753\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_6-1.png?resize=300%2C213&#038;ssl=1\" alt=\"\" width=\"300\" height=\"213\" class=\"aligncenter size-medium wp-image-3340\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_6-1.png?resize=300%2C213&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_6-1.png?resize=768%2C546&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_6-1.png?w=1024&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<li>Dan hasilnya akan seperti ini<\/li>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3341\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/attachment\/screenshot_7-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-1.png?fit=1305%2C735&amp;ssl=1?v=1592226001\" data-orig-size=\"1305,735\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_7\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-1.png?fit=1024%2C577&amp;ssl=1?v=1592226001\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-1.png?resize=300%2C169&#038;ssl=1\" alt=\"\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-3341\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-1.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-1.png?resize=1024%2C577&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-1.png?resize=768%2C433&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-1.png?resize=740%2C415&amp;ssl=1 740w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-1.png?resize=310%2C175&amp;ssl=1 310w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-1.png?w=1305&amp;ssl=1 1305w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Hallo sobat Hostnic.. Kemarin kita pernah juga membahas Cara menggunakan Bootstrap 4 di Website (Offline) nah sekarang mimin akan kasih tau juga cara menggunakan Bootstrap secara online. Jadi kalian gak perlu repot-repot download Source Code nya dulu, tapi tinggal copas ajah hehehe. Disini kita masih menggunakan Bootstrap versi terbaru ya yaitu versi 4 atau Bootstrap [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3343,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[246,79,248,82],"tags":[],"class_list":["post-3337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-tutorial","category-v4","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cara menggunakan Bootstrap 4 di Website secara Online - Hostnic.id<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara menggunakan Bootstrap 4 di Website secara Online - Hostnic.id\" \/>\n<meta property=\"og:description\" content=\"Hallo sobat Hostnic.. Kemarin kita pernah juga membahas Cara menggunakan Bootstrap 4 di Website (Offline) nah sekarang mimin akan kasih tau juga cara menggunakan Bootstrap secara online. Jadi kalian gak perlu repot-repot download Source Code nya dulu, tapi tinggal copas ajah hehehe. Disini kita masih menggunakan Bootstrap versi terbaru ya yaitu versi 4 atau Bootstrap [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostnic.id\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-15T13:07:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-15T13:08:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?v=1592226345\" \/>\n\t<meta property=\"og:image:width\" content=\"318\" \/>\n\t<meta property=\"og:image:height\" content=\"159\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Monic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Monic\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/\"},\"author\":{\"name\":\"Monic\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"headline\":\"Cara menggunakan Bootstrap 4 di Website secara Online\",\"datePublished\":\"2020-06-15T13:07:44+00:00\",\"dateModified\":\"2020-06-15T13:08:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/\"},\"wordCount\":102,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/download-2.jpg?fit=318%2C159&ssl=1?v=1592226345\",\"articleSection\":[\"Bootstrap\",\"Tutorial\",\"v4\",\"Website\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/\",\"name\":\"Cara menggunakan Bootstrap 4 di Website secara Online - Hostnic.id\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/download-2.jpg?fit=318%2C159&ssl=1?v=1592226345\",\"datePublished\":\"2020-06-15T13:07:44+00:00\",\"dateModified\":\"2020-06-15T13:08:13+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/download-2.jpg?fit=318%2C159&ssl=1?v=1592226345\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/download-2.jpg?fit=318%2C159&ssl=1?v=1592226345\",\"width\":318,\"height\":159},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/cara-menggunakan-bootstrap-4-di-website-secara-online\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara menggunakan Bootstrap 4 di Website secara Online\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\",\"name\":\"hostnic.id\",\"description\":\"Info, Tips dan Tutorial Seputar Layanan Hostnic\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\",\"name\":\"Monic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"caption\":\"Monic\"},\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/author\\\/blog-writer\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara menggunakan Bootstrap 4 di Website secara Online - Hostnic.id","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:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/","og_locale":"id_ID","og_type":"article","og_title":"Cara menggunakan Bootstrap 4 di Website secara Online - Hostnic.id","og_description":"Hallo sobat Hostnic.. Kemarin kita pernah juga membahas Cara menggunakan Bootstrap 4 di Website (Offline) nah sekarang mimin akan kasih tau juga cara menggunakan Bootstrap secara online. Jadi kalian gak perlu repot-repot download Source Code nya dulu, tapi tinggal copas ajah hehehe. Disini kita masih menggunakan Bootstrap versi terbaru ya yaitu versi 4 atau Bootstrap [&hellip;]","og_url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/","og_site_name":"Hostnic.id","article_published_time":"2020-06-15T13:07:44+00:00","article_modified_time":"2020-06-15T13:08:13+00:00","og_image":[{"width":318,"height":159,"url":"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?v=1592226345","type":"image\/jpeg"}],"author":"Monic","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Monic"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/#article","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/"},"author":{"name":"Monic","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"headline":"Cara menggunakan Bootstrap 4 di Website secara Online","datePublished":"2020-06-15T13:07:44+00:00","dateModified":"2020-06-15T13:08:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/"},"wordCount":102,"commentCount":0,"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?fit=318%2C159&ssl=1?v=1592226345","articleSection":["Bootstrap","Tutorial","v4","Website"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/","url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/","name":"Cara menggunakan Bootstrap 4 di Website secara Online - Hostnic.id","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/#primaryimage"},"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?fit=318%2C159&ssl=1?v=1592226345","datePublished":"2020-06-15T13:07:44+00:00","dateModified":"2020-06-15T13:08:13+00:00","author":{"@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"breadcrumb":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/#primaryimage","url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?fit=318%2C159&ssl=1?v=1592226345","contentUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?fit=318%2C159&ssl=1?v=1592226345","width":318,"height":159},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnic.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara menggunakan Bootstrap 4 di Website secara Online"}]},{"@type":"WebSite","@id":"https:\/\/www.hostnic.id\/blog\/#website","url":"https:\/\/www.hostnic.id\/blog\/","name":"hostnic.id","description":"Info, Tips dan Tutorial Seputar Layanan Hostnic","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostnic.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2","name":"Monic","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","caption":"Monic"},"url":"https:\/\/www.hostnic.id\/blog\/author\/blog-writer\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2.jpg?fit=318%2C159&ssl=1?v=1592226345","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8D2mv-RP","jetpack-related-posts":[{"id":3237,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/cara-menggunakan-bootstrap\/","url_meta":{"origin":3337,"position":0},"title":"Cara menggunakan Bootstrap 4 di Website (Offline)","author":"Monic","date":"2020-06-10","format":false,"excerpt":"Hai sobat hostnic... Kali ini mimin mau share nih cara menggunakan Bootstrap di Website kamu. Sebelumnya mimin udah share cara install aplikasi text editor yang akan kita gunakan nanti untuk coding website ini. Silahkan dibaca dulu Cara Install VS Code (Visual Studio Code) Pengertian Bootstrap \u00a0Bootstrap merupakan sebuah library framework\u2026","rel":"","context":"dalam &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=700%2C400 2x"},"classes":[]},{"id":3373,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menghubungkan-html-dengan-css\/","url_meta":{"origin":3337,"position":1},"title":"Cara menghubungkan HTML dengan CSS","author":"Monic","date":"2020-06-17","format":false,"excerpt":"Hallo sobat Hostnic... Kembali lagi nih sama mimin, sekarang kita akan melanjutkan project pembuatan website pribadi yaa. Nah sebelumnya kita sudah membuat navbar dengan library Bootstrap 4, sekarang kita edit dengan menggunakan CSS agar tampilannya makin segar dilihat. Cara membuat navbar mudah Sebelum kita mengedit navbar, langkah sebelumnya adalah menghubungkan\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3362,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/","url_meta":{"origin":3337,"position":2},"title":"Cara membuat navbar mudah","author":"Monic","date":"2020-06-16","format":false,"excerpt":"Hallo sobat Hostnic... Ketemu lagi nih sama mimin, hari ini mimin akan membahas tentang cara membuat Navbar atau Navigation Bar di website yang akan kita buat. Navbar adalah sebuah menu di website sehingga pengunjung tidak perlu mencari-cari informasi yang butuhkan tetapi langsung klik button pada navbar saja. Baca sebelumnya :\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3377,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/","url_meta":{"origin":3337,"position":3},"title":"Membuat navbar lebih rapih","author":"Monic","date":"2020-06-17","format":false,"excerpt":"\u00a0 Hallo sobat Hostnic... Nah sekarang saatnya mimin kasih tau agar navbar atau Navigation Bar di website kita bisa lebih rapih dan yang pasti enak untuk dilihat terutama HRD perusahaan yang akan kita lamar nantinya. Sebelumnya dibaca juga : Cara menghubungkan HTML dengan CSS Cara membuat navbar mudah \u00a0 Nah\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3393,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/","url_meta":{"origin":3337,"position":4},"title":"Cara menambahkan icon di Website","author":"Monic","date":"2020-06-18","format":false,"excerpt":"\u00a0 Hallo sobat Hostnic... Kembali lagi nih sama mimin, melanjutkan project yang kita buat sebelumnya mimin mau kasih tau nih agar nantinya website yang kita buat tambah kece yaitu penambahan icon. Dengan adanya icon, website tidak menjadi monoton karena bukan hanya sekedar tulisan tetapi ada gambar\/icon yang kita tambahkan. Untuk\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1%3Fv%3D1592496652&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1%3Fv%3D1592496652&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1%3Fv%3D1592496652&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1%3Fv%3D1592496652&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1%3Fv%3D1592496652&resize=1050%2C600 3x"},"classes":[]},{"id":3932,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/light-bootstrap-dashboard\/","url_meta":{"origin":3337,"position":5},"title":"Light Bootstrap Dashboard","author":"Nanda Anubis","date":"2020-09-04","format":false,"excerpt":"Light Bootstrap Dashboard telah dirancang untuk membantu mengembangkan panel admin kustom sendiri. Meskipun dapat digunakan secara gratis, namun Light Bootstrap Dashboard dapat menghasilkan halaman admin dashboard yang terlihat premium. Dengan tool ini, kita dapat menggunakan subtle animations, beragam pengaturan typography, serta 202 ikon. Light Bootstrap Dashboard juga fleksibel untuk digunakan.\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/09\/opt_lbd_thumbnail.jpg?fit=800%2C600&ssl=1%3Fv%3D1599066007&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/09\/opt_lbd_thumbnail.jpg?fit=800%2C600&ssl=1%3Fv%3D1599066007&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/09\/opt_lbd_thumbnail.jpg?fit=800%2C600&ssl=1%3Fv%3D1599066007&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/09\/opt_lbd_thumbnail.jpg?fit=800%2C600&ssl=1%3Fv%3D1599066007&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/comments?post=3337"}],"version-history":[{"count":3,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3337\/revisions"}],"predecessor-version":[{"id":3345,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3337\/revisions\/3345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media\/3343"}],"wp:attachment":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media?parent=3337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/categories?post=3337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/tags?post=3337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}