{"id":1260,"date":"2018-10-29T03:42:50","date_gmt":"2018-10-29T03:42:50","guid":{"rendered":"https:\/\/www.hostnic.id\/blog\/?p=1260"},"modified":"2018-10-29T03:48:09","modified_gmt":"2018-10-29T03:48:09","slug":"sistem-grid-bootstrap","status":"publish","type":"post","link":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/","title":{"rendered":"Sistem Grid Bootstrap"},"content":{"rendered":"<p>Sistem Grid Bootstrap dapat di buat sampai\u00a012 kolom dalam satu page.<\/p>\n<p>Jika anda tidak ingin menggunakan 12 kolom, anda dapat mengelompokan kolom bersama:<\/p>\n<div class=\"table-responsive\">\n<table class=\"grid\">\n<tbody>\n<tr>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<td>span 1<\/td>\n<\/tr>\n<tr>\n<td colspan=\"4\">span 4<\/td>\n<td colspan=\"4\">span 4<\/td>\n<td colspan=\"4\">span 4<\/td>\n<\/tr>\n<tr>\n<td colspan=\"4\">span 4<\/td>\n<td colspan=\"8\">span 8<\/td>\n<\/tr>\n<tr>\n<td colspan=\"6\">span 6<\/td>\n<td colspan=\"6\">span 6<\/td>\n<\/tr>\n<tr>\n<td colspan=\"12\">span 12<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Sistem Grid Bootstrap adalah\u00a0responsive, dan kolom akan menyesuaikan secara otomatis berdasarkan ukuran layar.<\/p>\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-69e9f54bb58ac\" 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-69e9f54bb58ac\"  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\/sistem-grid-bootstrap\/#Grid_Class\" >Grid Class<\/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\/sistem-grid-bootstrap\/#Struktur_Dasar_Grid_Bootstrap\" >Struktur Dasar Grid Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#Tiga_Kolom_yang_Sama\" >Tiga Kolom yang Sama<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#Example\" >Example<\/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:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#Dua_Kolom_Tidak_Sama\" >Dua Kolom Tidak Sama<\/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:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#Example-2\" >Example<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Grid_Class\"><\/span>Grid Class<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sistem Grid Bootstrap memiliki empat\u00a0class:<\/p>\n<ul>\n<li><code class=\"w3-codespan\">xs<\/code>\u00a0(untuk phones &#8211; screens less than 768px wide)<\/li>\n<li><code class=\"w3-codespan\">sm<\/code>\u00a0(untuk tablets &#8211; screens equal to or greater than 768px wide)<\/li>\n<li><code class=\"w3-codespan\">md<\/code>\u00a0(untuk laptop kecil &#8211; screens equal to or greater than 992px wide)<\/li>\n<li><code class=\"w3-codespan\">lg<\/code>\u00a0(untuk laptop dan desktop &#8211; screens equal to or greater than 1200px wide)<\/li>\n<\/ul>\n<p>Class\u00a0di atas dapat dikombinasikan untuk menciptakan tata letak yang lebih dinamis dan fleksibel.<\/p>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"Struktur_Dasar_Grid_Bootstrap\"><\/span>Struktur Dasar Grid Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Berikut ini adalah struktur dasar kisi Bootstrap:<\/p>\n<div class=\"w3-example\">\n<div class=\"w3-code notranslate htmlHigh\">\n<pre class=\"lang:default decode:true\">&lt;div\u00a0class=\"row\"&gt;\r\n\u00a0\u00a0&lt;div\u00a0class=\"col-*-*\"&gt;&lt;\/div&gt;\r\n\u00a0\u00a0&lt;div\u00a0class=\"col-*-*\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div\u00a0class=\"row\"&gt;\r\n\u00a0\u00a0&lt;div\u00a0class=\"col-*-*\"&gt;&lt;\/div&gt;\r\n\u00a0\u00a0&lt;div\u00a0class=\"col-*-*\"&gt;&lt;\/div&gt;\r\n\u00a0\u00a0&lt;div\u00a0class=\"col-*-*\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div\u00a0class=\"row\"&gt;\r\n\u00a0 ...\r\n&lt;\/div&gt;<\/pre>\n<p>Pertama; buat baris (<code class=\"w3-codespan\">&lt;div class=\"row\"&gt;<\/code>). kemudian, tambahkan jumlah kolom yang diinginkan (<code class=\"w3-codespan\">.col-*-*<\/code>). Catatan: Nomor dalam\u00a0<code class=\"w3-codespan\">.col-*-*<\/code>\u00a0harus selalu sampai 12 kolom.<\/p>\n<\/div>\n<\/div>\n<p>Di bawah ini kami telah mengumpulkan beberapa contoh layout grid Bootstrap dasar.<\/p>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"Tiga_Kolom_yang_Sama\"><\/span>Tiga Kolom yang Sama<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"container-fluid\">\n<div class=\"row\">\n<div class=\"col-sm-4\">.col-sm-4<\/div>\n<div class=\"col-sm-4\">.col-sm-4<\/div>\n<div class=\"col-sm-4\">.col-sm-4<\/div>\n<\/div>\n<\/div>\n<p>Contoh berikut menunjukkan cara mendapatkan tiga kolom dengan lebar yang sama mulai dari tablet dan penskalaan ke desktop besar. Pada ponsel atau layar yang lebarnya kurang dari 768px, kolom akan secara otomatis ditumpuk:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Example\"><\/span>Example<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate htmlHigh\">\n<pre class=\"lang:default decode:true \">&lt;div\u00a0class=\"row\"&gt;\r\n\u00a0\u00a0&lt;div\u00a0class=\"col-sm-4\"&gt;.col-sm-4&lt;\/div&gt;\r\n\u00a0\u00a0&lt;div\u00a0class=\"col-sm-4\"&gt;.col-sm-4&lt;\/div&gt;\r\n\u00a0\u00a0&lt;div\u00a0class=\"col-sm-4\"&gt;.col-sm-4&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Dua_Kolom_Tidak_Sama\"><\/span>Dua Kolom Tidak Sama<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"container-fluid\">\n<div class=\"row test\">\n<div class=\"col-sm-4\">.col-sm-4<\/div>\n<div class=\"col-sm-8\">.col-sm-8<\/div>\n<\/div>\n<\/div>\n<p>Contoh berikut menunjukkan cara mendapatkan dua kolom lebar-lebar mulai dari tablet dan penskalaan ke desktop besar:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Example-2\"><\/span>Example<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate htmlHigh\">\n<pre class=\"lang:default decode:true \">&lt;div\u00a0class=\"row\"&gt;\r\n\u00a0\u00a0&lt;div\u00a0class=\"col-sm-4\"&gt;.col-sm-4&lt;\/div&gt;\r\n\u00a0\u00a0&lt;div\u00a0class=\"col-sm-8\"&gt;.col-sm-8&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<div class=\"w3-panel w3-note\">\n<p><strong>Tip:<\/strong> Anda akan mempelajari lebih lanjut tentang grid Bootstrap nanti dalam tutorial ini.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Sistem Grid Bootstrap dapat di buat sampai\u00a012 kolom dalam satu page. Jika anda tidak ingin menggunakan 12 kolom, anda dapat mengelompokan kolom bersama: span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1273,"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-1260","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>Sistem Grid 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\/sistem-grid-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sistem Grid Bootstrap - Hostnic.id\" \/>\n<meta property=\"og:description\" content=\"Sistem Grid Bootstrap dapat di buat sampai\u00a012 kolom dalam satu page. Jika anda tidak ingin menggunakan 12 kolom, anda dapat mengelompokan kolom bersama: span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostnic.id\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-29T03:42:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-29T03:48:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\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=\"2 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\\\/sistem-grid-bootstrap\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/\"},\"author\":{\"name\":\"Ari Sigit\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/a782d1235d484e7630007157996e5a49\"},\"headline\":\"Sistem Grid Bootstrap\",\"datePublished\":\"2018-10-29T03:42:50+00:00\",\"dateModified\":\"2018-10-29T03:48:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/\"},\"wordCount\":243,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap.png?fit=1200%2C630&ssl=1\",\"articleSection\":[\"v3\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/\",\"name\":\"Sistem Grid Bootstrap - Hostnic.id\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap.png?fit=1200%2C630&ssl=1\",\"datePublished\":\"2018-10-29T03:42:50+00:00\",\"dateModified\":\"2018-10-29T03:48:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/a782d1235d484e7630007157996e5a49\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap.png?fit=1200%2C630&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap.png?fit=1200%2C630&ssl=1\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/sistem-grid-bootstrap\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sistem Grid 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":"Sistem Grid 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\/sistem-grid-bootstrap\/","og_locale":"id_ID","og_type":"article","og_title":"Sistem Grid Bootstrap - Hostnic.id","og_description":"Sistem Grid Bootstrap dapat di buat sampai\u00a012 kolom dalam satu page. Jika anda tidak ingin menggunakan 12 kolom, anda dapat mengelompokan kolom bersama: span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4 [&hellip;]","og_url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/","og_site_name":"Hostnic.id","article_published_time":"2018-10-29T03:42:50+00:00","article_modified_time":"2018-10-29T03:48:09+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png","type":"image\/png"}],"author":"Ari Sigit","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Ari Sigit","Estimasi waktu membaca":"2 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#article","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/"},"author":{"name":"Ari Sigit","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/a782d1235d484e7630007157996e5a49"},"headline":"Sistem Grid Bootstrap","datePublished":"2018-10-29T03:42:50+00:00","dateModified":"2018-10-29T03:48:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/"},"wordCount":243,"commentCount":0,"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1","articleSection":["v3"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/","url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/","name":"Sistem Grid Bootstrap - Hostnic.id","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1","datePublished":"2018-10-29T03:42:50+00:00","dateModified":"2018-10-29T03:48:09+00:00","author":{"@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/a782d1235d484e7630007157996e5a49"},"breadcrumb":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#primaryimage","url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/sistem-grid-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnic.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Sistem Grid 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.png?fit=1200%2C630&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8D2mv-kk","jetpack-related-posts":[{"id":1276,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/","url_meta":{"origin":1260,"position":0},"title":"Text\/Typography Bootstrap","author":"Ari Sigit","date":"2018-10-29","format":false,"excerpt":"Bootstrap Default Settings Bootstrap global ukuran huruf nya 14px, dengan tinggi line\u00a01.428. Yang di terapkan ke\u00a0<body> element dan semua paragrap (<p>). Tambahan, semua\u00a0<p> elemen memiliki margin bawah yang sama dengan setengah tinggi garis yang dihitung\u00a0(10px by default). Bootstrap vs. Browser Defaults Dalam artikel ini, kita akan melihat beberapa elemen HTML\u2026","rel":"","context":"dalam &quot;v3&quot;","block_context":{"text":"v3","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/v3\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7123,"url":"https:\/\/www.hostnic.id\/blog\/teknologi\/framework-front-end-bootstrap-membangun-antarmuka-yang-menarik\/","url_meta":{"origin":1260,"position":1},"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":1163,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/","url_meta":{"origin":1260,"position":2},"title":"Apa itu Bootstrap?","author":"Ari Sigit","date":"2018-10-24","format":false,"excerpt":"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\u2026","rel":"","context":"dalam &quot;v3&quot;","block_context":{"text":"v3","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/v3\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":9286,"url":"https:\/\/www.hostnic.id\/blog\/berita\/contoh-coding-html-website-penjualan-dengan-tampilan-menarik\/","url_meta":{"origin":1260,"position":3},"title":"Contoh Coding HTML Website Penjualan: Dengan Tampilan Menarik.","author":"Monic","date":"2024-03-09","format":false,"excerpt":"Halo pembaca yang terhormat, bagaimana kabar Kamu? Selamat datang di artikel ini yang akan membahas contoh coding HTML website penjualan dengan tampilan menarik. Dalam artikel ini, kami akan membahas berbagai kode-kode HTML yang dapat Kamu gunakan untuk menciptakan tampilan website penjualan yang menarik dan memikat. Mari kita jelajahi bersama-sama dan\u2026","rel":"","context":"dalam &quot;Berita&quot;","block_context":{"text":"Berita","link":"https:\/\/www.hostnic.id\/blog\/.\/berita\/"},"img":{"alt_text":"Contoh coding HTML website penjualan","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/download-29.png?fit=620%2C413&ssl=1%3Fv%3D1709964934&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/download-29.png?fit=620%2C413&ssl=1%3Fv%3D1709964934&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/download-29.png?fit=620%2C413&ssl=1%3Fv%3D1709964934&resize=525%2C300 1.5x"},"classes":[]},{"id":4738,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/mengenal-apa-itu-bootstrap-serta-keunggulannya\/","url_meta":{"origin":1260,"position":4},"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":3805,"url":"https:\/\/www.hostnic.id\/blog\/berita\/framework-css-untuk-tampilan-website\/","url_meta":{"origin":1260,"position":5},"title":"Framework CSS Untuk Tampilan Website","author":"Nanda Anubis","date":"2020-08-01","format":false,"excerpt":"Berikut ini adalah Framework CSS alternatif yang mungkin cocok untuk tampilan website kalian. Check it out! Spectre CSS Framework ini dibilang masih cukup baru, namun telah memiliki cukup banyak penggemar. Secara basis, framework ini berukuran cukup kecil. Bahkan ketika dilakukan uji coba dengan melakukan bundling menggunakan webpack bundler tanpa konfigurasi\u2026","rel":"","context":"dalam &quot;Berita&quot;","block_context":{"text":"Berita","link":"https:\/\/www.hostnic.id\/blog\/.\/berita\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/08\/css.png?fit=554%2C312&ssl=1%3Fv%3D1596344556&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/08\/css.png?fit=554%2C312&ssl=1%3Fv%3D1596344556&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/08\/css.png?fit=554%2C312&ssl=1%3Fv%3D1596344556&resize=525%2C300 1.5x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/1260","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=1260"}],"version-history":[{"count":13,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/1260\/revisions"}],"predecessor-version":[{"id":1274,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/1260\/revisions\/1274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media\/1273"}],"wp:attachment":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media?parent=1260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/categories?post=1260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/tags?post=1260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}