{"id":1163,"date":"2018-10-24T11:26:57","date_gmt":"2018-10-24T11:26:57","guid":{"rendered":"https:\/\/www.hostnic.id\/blog\/?p=1163"},"modified":"2018-10-24T11:27:19","modified_gmt":"2018-10-24T11:27:19","slug":"apa-itu-bootstrap","status":"publish","type":"post","link":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/","title":{"rendered":"Apa itu Bootstrap?"},"content":{"rendered":"<ul>\n<li>Bootstrap adalah front-end framework gratis untuk kecepatan dan memudahkan merancang web<\/li>\n<li>Bootstrap berbasis HTML dan CSS untuk typography, forms, button, table, navigation, modal, image carousels dan banyak lagi,\u00a0 tentu juga JavaScript<\/li>\n<li>Bootstrap juga memiliki kemampuan mempermudah membuat design responsive<\/li>\n<\/ul>\n<p><strong>Apa itu Desain Web Responsif?<\/strong><\/p>\n<p>Desain web responsif adalah membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga desktop besar.<\/p>\n<p><strong>Riwayat Bootstrap<\/strong><\/p>\n<p>Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada Agustus 2011 di GitHub. Pada Juni 2014 Bootstrap adalah proyek No.1 di GitHub!<\/p>\n<p><strong>Mengapa Menggunakan Bootstrap?<\/strong><\/p>\n<p><strong>Keuntungan Bootstrap:<\/strong><\/p>\n<ul>\n<li>Mudah digunakan: Siapa saja yang hanya memiliki pengetahuan dasar tentang HTML dan CSS dapat mulai menggunakan Bootstrap<\/li>\n<li>Fitur responsif: CSS responsif Bootstrap menyesuaikan dengan ponsel, tablet, dan desktop<\/li>\n<li>Pendekatan Mobile-first: Dalam Bootstrap 3, gaya seluler pertama adalah bagian dari kerangka inti<\/li>\n<li>Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Edge, Safari, dan Opera)<\/li>\n<\/ul>\n<p><strong>Di mana Mendapatkan Bootstrap?<\/strong><\/p>\n<p>Ada dua cara untuk mulai menggunakan Bootstrap di situs web Anda sendiri.<\/p>\n<p><strong>Kamu bisa:<\/strong><\/p>\n<p>Unduh Bootstrap dari getbootstrap.com. Sertakan Bootstrap dari CDN<\/p>\n<p><strong>Mengunduh Bootstrap<\/strong><\/p>\n<p>Jika Anda ingin mengunduh dan menginangi Bootstrap sendiri, buka getbootstrap.com, dan ikuti petunjuk di sana.<\/p>\n<p><strong>Bootstrap CDN<\/strong><\/p>\n<p>Jika Anda tidak ingin mengunduh dan menginangi Bootstrap sendiri, Anda dapat menyertakannya dari CDN.<\/p>\n<pre class=\"lang:default decode:true \">&lt;!-- Latest compiled and minified CSS --&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"&gt;\r\n\r\n&lt;!-- jQuery library --&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;!-- Latest compiled JavaScript --&gt;\r\n&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Daftar Isi<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69e7a6223bae2\" class=\"ez-toc-cssicon-toggle-label\"><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><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e7a6223bae2\"  aria-label=\"Toggle\" \/><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:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#Membuat_Web_Page_Pertama_dengan_Bootstrap\" >Membuat Web Page Pertama dengan Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#Halaman_Basik_Bootstrap\" >Halaman Basik Bootstrap<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#Contoh\" >Contoh<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#Contoh-2\" >Contoh<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Membuat_Web_Page_Pertama_dengan_Bootstrap\"><\/span>Membuat Web Page Pertama dengan Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>1. Tambah HTML5 doctype<\/strong><\/p>\n<p>Bootstrap menggunakan element HTML dan CSS yang di perlukan HTML5 doctype.<\/p>\n<p>Selalu gunakan HTML5 doctype di atas halaman, bersama dengan atribut lang dan character set yang benar:<\/p>\n<div class=\"w3-example\">\n<div class=\"w3-code notranslate htmlHigh\">\n<pre class=\"lang:default decode:true \">&lt;!DOCTYPE\u00a0html&gt;\r\n&lt;html\u00a0lang=\"en\"&gt;\r\n\u00a0\u00a0&lt;head&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;meta\u00a0charset=\"utf-8\"&gt;\u00a0\r\n\u00a0\u00a0&lt;\/head&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>2. Bootstrap 3 adalah mobile-first<\/strong><\/p>\n<\/div>\n<\/div>\n<p>Bootstrap 3 dirancang untuk responsif terhadap perangkat seluler. Gaya pertama seluler adalah bagian dari kerangka inti.<\/p>\n<p>Untuk memastikan rendering yang tepat dan menyentuh zoom, tambahkan yang berikut ini <code class=\"w3-codespan\">&lt;meta&gt;<\/code>\u00a0tag di dalam elemen\u00a0<code class=\"w3-codespan\">&lt;head&gt;<\/code>\u00a0:<\/p>\n<div class=\"w3-example\">\n<div class=\"w3-code notranslate htmlHigh\">&lt;meta\u00a0name=&#8221;viewport&#8221;\u00a0content=&#8221;width=device-width, initial-scale=1&#8243;&gt;<\/div>\n<\/div>\n<p><code class=\"w3-codespan\">width=device-width<\/code>\u00a0 bagian set lebar halaman untuk mengikuti lebar layar sebuah perangkat (yang akan bervariasi tergantung pada perangkat).<\/p>\n<p><code class=\"w3-codespan\">initial-scale=1<\/code> bagian menetapkan tingkat zoom awal ketika halaman pertama kali dimuat oleh browser.<\/p>\n<p><strong>3. Containers<\/strong><\/p>\n<p>Bootstrap juga membutuhkan elemen yang mengandung untuk membungkus isi situs.<\/p>\n<p>Ada dua class container untuk dipilih:<\/p>\n<ol>\n<li><code class=\"w3-codespan\">.container<\/code>\u00a0class memberikan responsive\u00a0<strong>fixed width container<\/strong><\/li>\n<li><code class=\"w3-codespan\">.container-fluid<\/code>\u00a0class memberikan\u00a0<strong>full width container<\/strong>, mencakup seluruh lebar area pandang<\/li>\n<\/ol>\n<div class=\"w3-row-padding\">\n<div class=\"w3-half\">\n<div class=\"w3-padding w3-padding-16\">\n<div class=\"w3-display-container\"><span class=\"w3-display-middle\">.container<\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"w3-half\">\n<div class=\"w3-padding-16\">\n<div class=\"w3-center w3-display-container\"><span class=\"w3-display-middle\">.container-fluid<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"Halaman_Basik_Bootstrap\"><\/span>Halaman Basik Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Contoh berikut menunjukkan kode untuk halaman Bootstrap dasar (dengan wadah lebar tetap responsif):<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate htmlHigh\">\n<pre class=\"lang:default decode:true \">&lt;!DOCTYPE\u00a0html&gt;\r\n&lt;html\u00a0lang=\"en\"&gt;\r\n&lt;head&gt;\r\n\u00a0\u00a0&lt;title&gt;Bootstrap Example&lt;\/title&gt;\r\n\u00a0\u00a0&lt;meta\u00a0charset=\"utf-8\"&gt;\r\n\u00a0\u00a0&lt;meta\u00a0name=\"viewport\"\u00a0content=\"width=device-width, initial-scale=1\"&gt;\r\n\u00a0\u00a0&lt;link\u00a0rel=\"stylesheet\"href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"&gt;\r\n\u00a0\u00a0&lt;script\u00a0src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0&lt;script\u00a0src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div\u00a0class=\"container\"&gt;\r\n\u00a0\u00a0&lt;h1&gt;My First Bootstrap Page&lt;\/h1&gt;\r\n\u00a0\u00a0&lt;p&gt;This is some text.&lt;\/p&gt;\u00a0\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Contoh berikut menunjukkan kode untuk halaman Bootstrap dasar (dengan penampung lebar penuh):<\/p>\n<\/div>\n<\/div>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-2\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate htmlHigh\">\n<pre class=\"lang:default decode:true \">&lt;!DOCTYPE\u00a0html&gt;\r\n&lt;html\u00a0lang=\"en\"&gt;\r\n&lt;head&gt;\r\n\u00a0\u00a0&lt;title&gt;Bootstrap Example&lt;\/title&gt;\r\n\u00a0\u00a0&lt;meta\u00a0charset=\"utf-8\"&gt;\r\n\u00a0\u00a0&lt;meta\u00a0name=\"viewport\"\u00a0content=\"width=device-width, initial-scale=1\"&gt;\r\n\u00a0\u00a0&lt;link\u00a0rel=\"stylesheet\"href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"&gt;\r\n\u00a0\u00a0&lt;script\u00a0src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0&lt;script\u00a0src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div\u00a0class=\"container-fluid\"&gt;\r\n\u00a0\u00a0&lt;h1&gt;My First Bootstrap Page&lt;\/h1&gt;\r\n\u00a0\u00a0&lt;p&gt;This is some text.&lt;\/p&gt;\u00a0\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap adalah front-end framework gratis untuk kecepatan dan memudahkan merancang web Bootstrap berbasis HTML dan CSS untuk typography, forms, button, table, navigation, modal, image carousels dan banyak lagi,\u00a0 tentu juga JavaScript Bootstrap juga memiliki kemampuan mempermudah membuat design responsive Apa itu Desain Web Responsif? Desain web responsif adalah membuat situs web yang secara otomatis menyesuaikan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1165,"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":[247],"tags":[],"class_list":["post-1163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-v3"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Apa itu Bootstrap? - 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\/v3\/apa-itu-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apa itu Bootstrap? - Hostnic.id\" \/>\n<meta property=\"og:description\" content=\"Bootstrap adalah front-end framework gratis untuk kecepatan dan memudahkan merancang web Bootstrap berbasis HTML dan CSS untuk typography, forms, button, table, navigation, modal, image carousels dan banyak lagi,\u00a0 tentu juga JavaScript Bootstrap juga memiliki kemampuan mempermudah membuat design responsive Apa itu Desain Web Responsif? Desain web responsif adalah membuat situs web yang secara otomatis menyesuaikan [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostnic.id\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-24T11:26:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-24T11:27:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ari Sigit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ari Sigit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 menit\" \/>\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\\\/v3\\\/apa-itu-bootstrap\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/\"},\"author\":{\"name\":\"Ari Sigit\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/a782d1235d484e7630007157996e5a49\"},\"headline\":\"Apa itu Bootstrap?\",\"datePublished\":\"2018-10-24T11:26:57+00:00\",\"dateModified\":\"2018-10-24T11:27:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/\"},\"wordCount\":396,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1\",\"articleSection\":[\"v3\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/\",\"name\":\"Apa itu Bootstrap? - Hostnic.id\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1\",\"datePublished\":\"2018-10-24T11:26:57+00:00\",\"dateModified\":\"2018-10-24T11:27:19+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/a782d1235d484e7630007157996e5a49\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1\",\"width\":1200,\"height\":900},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/apa-itu-bootstrap\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Apa itu Bootstrap?\"}]},{\"@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\\\/a782d1235d484e7630007157996e5a49\",\"name\":\"Ari Sigit\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g\",\"caption\":\"Ari Sigit\"},\"description\":\"Application Developer &amp; Support Specialist\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apa itu Bootstrap? - 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\/v3\/apa-itu-bootstrap\/","og_locale":"id_ID","og_type":"article","og_title":"Apa itu Bootstrap? - Hostnic.id","og_description":"Bootstrap adalah front-end framework gratis untuk kecepatan dan memudahkan merancang web Bootstrap berbasis HTML dan CSS untuk typography, forms, button, table, navigation, modal, image carousels dan banyak lagi,\u00a0 tentu juga JavaScript Bootstrap juga memiliki kemampuan mempermudah membuat design responsive Apa itu Desain Web Responsif? Desain web responsif adalah membuat situs web yang secara otomatis menyesuaikan [&hellip;]","og_url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/","og_site_name":"Hostnic.id","article_published_time":"2018-10-24T11:26:57+00:00","article_modified_time":"2018-10-24T11:27:19+00:00","og_image":[{"width":1200,"height":900,"url":"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png","type":"image\/png"}],"author":"Ari Sigit","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Ari Sigit","Estimasi waktu membaca":"4 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#article","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/"},"author":{"name":"Ari Sigit","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/a782d1235d484e7630007157996e5a49"},"headline":"Apa itu Bootstrap?","datePublished":"2018-10-24T11:26:57+00:00","dateModified":"2018-10-24T11:27:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/"},"wordCount":396,"commentCount":0,"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1","articleSection":["v3"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/","url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/","name":"Apa itu Bootstrap? - Hostnic.id","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1","datePublished":"2018-10-24T11:26:57+00:00","dateModified":"2018-10-24T11:27:19+00:00","author":{"@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/a782d1235d484e7630007157996e5a49"},"breadcrumb":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#primaryimage","url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1","width":1200,"height":900},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnic.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Apa itu Bootstrap?"}]},{"@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\/a782d1235d484e7630007157996e5a49","name":"Ari Sigit","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g","caption":"Ari Sigit"},"description":"Application Developer &amp; Support Specialist","url":"https:\/\/www.hostnic.id\/blog\/author\/admin\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8D2mv-iL","jetpack-related-posts":[{"id":7123,"url":"https:\/\/www.hostnic.id\/blog\/teknologi\/framework-front-end-bootstrap-membangun-antarmuka-yang-menarik\/","url_meta":{"origin":1163,"position":0},"title":"Framework Front-End Bootstrap: Membangun Antarmuka yang Menarik","author":"Monic","date":"2023-09-12","format":false,"excerpt":"Hostnic.id -\u00a0Halo pembaca yang budiman! Bagaimana kabar kalian? Semoga kalian semua dalam keadaan baik-baik saja. Kali ini, kita akan membahas tentang Framework Front-End Bootstrap: Membangun Antarmuka yang Menarik. Bootstrap merupakan salah satu framework yang populer di dunia pengembangan website. Dengan Bootstrap, kita dapat dengan mudah membuat antarmuka yang menarik dan\u2026","rel":"","context":"dalam &quot;Teknologi&quot;","block_context":{"text":"Teknologi","link":"https:\/\/www.hostnic.id\/blog\/.\/teknologi\/"},"img":{"alt_text":"Framework Front-End Bootstrap: Membangun Antarmuka yang Menarik","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=1050%2C600 3x"},"classes":[]},{"id":4745,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/kelebihan-dan-kekurangan-bootstrap\/","url_meta":{"origin":1163,"position":1},"title":"Kelebihan dan Kekurangan Bootstrap","author":"Monic","date":"2021-04-07","format":false,"excerpt":"Pada artikel sebelumnya, kita sudah Mengenal Apa Itu Bootstrap Serta Keunggulannya. Dimana pengertian bootstrap adalah framework CSS yang dibuat khusus untuk mempermudah dan mempercepat dalam pengembangan front end sebuah website. Banyak alasan mengapa bootstrap menjadi salah satu framework yang cukup populer dan paling banyak digunakan oleh para developer.\u00a0 Berikut adalah\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"kelebihan dan kekurangan bootstrap","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/bootstrap.jpg?fit=813%2C629&ssl=1%3Fv%3D1617766983&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/bootstrap.jpg?fit=813%2C629&ssl=1%3Fv%3D1617766983&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/bootstrap.jpg?fit=813%2C629&ssl=1%3Fv%3D1617766983&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/bootstrap.jpg?fit=813%2C629&ssl=1%3Fv%3D1617766983&resize=700%2C400 2x"},"classes":[]},{"id":4738,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/mengenal-apa-itu-bootstrap-serta-keunggulannya\/","url_meta":{"origin":1163,"position":2},"title":"Mengenal Apa Itu Bootstrap Serta Keunggulannya","author":"Monic","date":"2021-04-06","format":false,"excerpt":"Pada artikel sebelumnya kita sudah membahas tentang Rekomendasi CSS Framework Terbaik dimana salah satu rekomendasinya adalah Bootstrap. Pengertian Framework sendiri adalah sebuah software yang bertujuan untuk memudahkan para developer atau programer dalam tahap membuat sebuah aplikasi atau website.\u00a0 Lantas, Apa Itu Bootstrap? Bagi sebagian depelover atau programming pasti sudah tidak\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"Apa Itu Bootstrap","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/1953377.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/1953377.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/1953377.jpg?fit=1200%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/1953377.jpg?fit=1200%2C1200&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/1953377.jpg?fit=1200%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":9295,"url":"https:\/\/www.hostnic.id\/blog\/teknologi\/template-website-sekolah-bootstrap-gratis-pendidikan-tanpa-batas\/","url_meta":{"origin":1163,"position":3},"title":"Template Website Sekolah Bootstrap Gratis: Pendidikan Tanpa Batas!","author":"Monic","date":"2024-03-09","format":false,"excerpt":"Hostnic\u00a0\u2013\u00a0Halo, pembaca yang terhormat! Bagaimana kabar kalian? Apakah semuanya baik-baik saja? Kami harap semuanya berjalan dengan lancar dalam kehidupan kalian. Pada kesempatan kali ini, kami ingin membahas tentang Template Website Sekolah Bootstrap Gratis. Dalam era digital yang semakin maju ini, penting bagi sekolah-sekolah untuk memiliki website yang menarik dan fungsional.\u2026","rel":"","context":"dalam &quot;Teknologi&quot;","block_context":{"text":"Teknologi","link":"https:\/\/www.hostnic.id\/blog\/.\/teknologi\/"},"img":{"alt_text":"Template Website Sekolah Bootstrap Gratis: Pendidikan Tanpa Batas!","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/Screenshot_3-1.jpg?fit=1200%2C646&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/Screenshot_3-1.jpg?fit=1200%2C646&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/Screenshot_3-1.jpg?fit=1200%2C646&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/Screenshot_3-1.jpg?fit=1200%2C646&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/Screenshot_3-1.jpg?fit=1200%2C646&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4677,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/rekomendasi-css-framework-terbaik\/","url_meta":{"origin":1163,"position":4},"title":"Rekomendasi CSS Framework Terbaik","author":"Monic","date":"2021-03-25","format":false,"excerpt":"Jika pada artikel sebelumnya, kita sudah berkenalan dengan Apa itu Framework serta Fungsinya untuk memudahkan programmer dalam pembuatan sebuah website dan aplikasi. Kali ini kami akan memberikan beberapa rekomendasi CSS Framework Terbaik yang bisa Anda gunakan.\u00a0 Berikut adalah rekomendasi CSS Framework :\u00a0 1. Bootstrap Bootstrap merupakan salah satu jenis CSS\u2026","rel":"","context":"dalam &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/"},"img":{"alt_text":"CSS Framework","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/03\/1985597.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/03\/1985597.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/03\/1985597.jpg?fit=1200%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/03\/1985597.jpg?fit=1200%2C1200&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/03\/1985597.jpg?fit=1200%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3926,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap-admin-dashboard-template\/","url_meta":{"origin":1163,"position":5},"title":"Bootstrap Admin Dashboard Template","author":"Nanda Anubis","date":"2020-09-02","format":false,"excerpt":"Hadirnya admin dashboard template saat ini membuat pengembangan web dan aplikasi menjadi lebih mudah. Dengan kumpulan template admin Bootstrap, Anda dapat menemukan toolkit user interface (UI) yang sesuai dengan proyek.\u00a0Bootstrap adalah kerangka kerja CSS paling populer yang menyediakan struktur dasar untuk web designer dan web developer. Template admin dashboard milik\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\/four-bootstrap-4-projects-400x277-1.jpg?fit=400%2C277&ssl=1%3Fv%3D1599064894&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/1163","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/comments?post=1163"}],"version-history":[{"count":1,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/1163\/revisions"}],"predecessor-version":[{"id":1164,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/1163\/revisions\/1164"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media\/1165"}],"wp:attachment":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media?parent=1163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/categories?post=1163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/tags?post=1163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}