{"id":1367,"date":"2026-01-21T01:30:16","date_gmt":"2026-01-21T01:30:16","guid":{"rendered":"https:\/\/gurututorku.com\/blog\/?p=1367"},"modified":"2026-01-21T01:46:49","modified_gmt":"2026-01-21T01:46:49","slug":"belajar-bootstrap-css-framework","status":"publish","type":"post","link":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/","title":{"rendered":"Belajar Bootstrap (CSS Framework)"},"content":{"rendered":"\n<p>Bootstrap adalah framework CSS populer yang digunakan untuk membuat halaman web yang responsif dan modern dengan lebih mudah dan cepat. Bootstrap menyediakan banyak <em>class<\/em> siap pakai untuk styling, layout, dan komponen interaktif, sehingga mengurangi kebutuhan untuk menulis CSS dari nol.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Mengenal CSS Framework<\/h3>\n\n\n\n<p>CSS Framework adalah kumpulan kode CSS yang siap pakai untuk mempercepat pengembangan web. Framework seperti Bootstrap menyediakan struktur CSS dasar, komponen, dan sistem grid yang telah diatur, sehingga pengembang bisa fokus pada konten dan desain. Selain Bootstrap, ada juga framework lain seperti Bulma, Foundation, dan Tailwind CSS.<\/p>\n\n\n\n<p>Keuntungan menggunakan CSS Framework:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hemat waktu karena banyak <em>class<\/em> dan komponen sudah disediakan.<\/li>\n\n\n\n<li>Desain responsif sudah terintegrasi, sehingga halaman mudah diakses dari berbagai ukuran layar.<\/li>\n\n\n\n<li>Memiliki konsistensi desain dan standar tata letak yang baik.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Mengenal Grid System<\/h3>\n\n\n\n<p>Grid System pada Bootstrap adalah sistem layout berbasis grid yang memungkinkan kita untuk membagi layar menjadi kolom-kolom. Dengan grid system ini, tata letak elemen bisa dengan mudah disesuaikan untuk berbagai ukuran layar, seperti desktop, tablet, dan ponsel.<\/p>\n\n\n\n<p>Pada Bootstrap, layar dibagi menjadi 12 kolom dan kita bisa mengatur lebar kolom dengan <em>class<\/em> seperti <code>col-1<\/code>, <code>col-6<\/code>, <code>col-lg-4<\/code>, dll., tergantung pada ukuran layar yang ditargetkan.<\/p>\n\n\n\n<p><strong>Contoh Grid System:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;div class=\"container\"><br>    &lt;div class=\"row\"><br>        &lt;div class=\"col-4\">Kolom 1&lt;\/div><br>        &lt;div class=\"col-4\">Kolom 2&lt;\/div><br>        &lt;div class=\"col-4\">Kolom 3&lt;\/div><br>    &lt;\/div><br>&lt;\/div><br><\/code><\/pre>\n\n\n\n<p>Grid System ini membuat elemen tetap responsif secara otomatis pada berbagai ukuran layar (small, medium, large, dan extra-large).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Menggunakan Bootstrap Versi Offline<\/h3>\n\n\n\n<p>Untuk menggunakan Bootstrap secara offline, kita perlu mengunduh file CSS dan JavaScript Bootstrap.<\/p>\n\n\n\n<p>Cara menggunakan Bootstrap versi offline:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Unduh Bootstrap dari situs resmi <a href=\"https:\/\/getbootstrap.com\">https:\/\/getbootstrap.com<\/a>.<\/li>\n\n\n\n<li>Ekstrak file zip yang diunduh dan letakkan file CSS dan JavaScript ke dalam folder proyek Anda.<\/li>\n\n\n\n<li>Tambahkan file CSS dan JavaScript tersebut ke HTML Anda menggunakan tag <code>&lt;link><\/code> dan <code>&lt;script><\/code><br><code>&lt;link rel=\"stylesheet\" href=\"path\/to\/bootstrap.min.css\"><\/code><br><code>&lt;script src=\"path\/to\/bootstrap.bundle.min.js\">&lt;\/script><\/code><\/li>\n<\/ol>\n\n\n\n<p>Dengan Bootstrap versi offline, kita bisa mengembangkan halaman tanpa koneksi internet, namun tetap bisa memanfaatkan semua fitur Bootstrap.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">&#x1f535; TAHAP 4 \u2013 HTML + Bootstrap (Website Modern &amp; Responsif)<\/h1>\n\n\n\n<p>Di tahap ini kita belajar bahwa:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cBootstrap adalah kumpulan CSS siap pakai<br>yang membuat website langsung rapi, modern, dan responsif<br>tanpa harus menulis CSS dari nol.\u201d<\/p>\n<\/blockquote>\n\n\n\n<p>Dengan Bootstrap:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tampilan otomatis lebih bagus<\/li>\n\n\n\n<li>Layout rapi di HP, tablet, dan laptop<\/li>\n\n\n\n<li>Kita fokus ke struktur, bukan ribet di desain<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&#x1f535; Langkah 1 \u2013 Menambahkan Bootstrap ke HTML<\/h2>\n\n\n\n<p>Buka <code>index.html<\/code>, lalu di dalam <code>&lt;head&gt;<\/code> tambahkan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\n<\/code><\/pre>\n\n\n\n<p>Dan sebelum <code>&lt;\/body&gt;<\/code> tambahkan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Penjelasan :<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cBootstrap tidak perlu di-install.<br>Kita cukup memanggilnya dari internet menggunakan CDN.\u201d<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">&#x1f535; Langkah 2 \u2013 Mengubah Header Menjadi Navbar Bootstrap<\/h2>\n\n\n\n<p>Ganti bagian <code>&lt;header&gt;<\/code> menjadi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"navbar navbar-expand-lg navbar-dark bg-primary\">\n  &lt;div class=\"container\">\n    &lt;a class=\"navbar-brand\" href=\"#\">Toko Online SMK&lt;\/a>\n    &lt;div>\n      &lt;a class=\"nav-link d-inline text-white\" href=\"#home\">Home&lt;\/a>\n      &lt;a class=\"nav-link d-inline text-white\" href=\"#produk\">Produk&lt;\/a>\n      &lt;a class=\"nav-link d-inline text-white\" href=\"#kontak\">Kontak&lt;\/a>\n    &lt;\/div>\n    &lt;span class=\"text-white\">\n      Keranjang: &lt;span id=\"cart\">0&lt;\/span>\n    &lt;\/span>\n  &lt;\/div>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p>Penjelasan sederhana:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>navbar<\/code> \u2192 komponen menu Bootstrap<\/li>\n\n\n\n<li><code>bg-primary<\/code> \u2192 warna biru<\/li>\n\n\n\n<li><code>container<\/code> \u2192 memberi batas rapi di tengah<\/li>\n<\/ul>\n\n\n\n<p>Tanpa CSS tambahan, navbar sudah terlihat profesional.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&#x1f535; Langkah 3 \u2013 Membungkus Konten dengan Container<\/h2>\n\n\n\n<p>Agar konten rapi, bungkus semua <code>&lt;section&gt;<\/code> dengan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container mt-4\"&gt;\n    &lt;!-- semua section di dalam sini --&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p><code>container<\/code> = membuat halaman tidak menempel ke tepi layar<br><code>mt-4<\/code> = margin top (jarak atas)<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&#x1f535; Langkah 4 \u2013 Mengubah Produk Menjadi Card Bootstrap<\/h2>\n\n\n\n<p>Ubah bagian produk menjadi seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;section id=\"produk\"&gt;\n  &lt;h2 class=\"mb-3\"&gt;Produk Kami&lt;\/h2&gt;\n\n  &lt;div class=\"row\"&gt;\n    &lt;div class=\"col-md-4\"&gt;\n      &lt;div class=\"card mb-3\"&gt;\n        &lt;img src=\"https:\/\/images.unsplash.com\/photo-1520975916090-3105956dac38\" class=\"card-img-top\"&gt;\n        &lt;div class=\"card-body text-center\"&gt;\n          &lt;h5 class=\"card-title\"&gt;Kaos Polos&lt;\/h5&gt;\n          &lt;p class=\"card-text\"&gt;Rp 50.000&lt;\/p&gt;\n          &lt;button class=\"btn btn-warning\" onclick=\"beliProduk('Kaos Polos')\"&gt;Beli&lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"col-md-4\"&gt;\n      &lt;div class=\"card mb-3\"&gt;\n        &lt;img src=\"https:\/\/images.unsplash.com\/photo-1528701800489-20be3c1ea3e6\" class=\"card-img-top\"&gt;\n        &lt;div class=\"card-body text-center\"&gt;\n          &lt;h5 class=\"card-title\"&gt;Sepatu Sneakers&lt;\/h5&gt;\n          &lt;p class=\"card-text\"&gt;Rp 150.000&lt;\/p&gt;\n          &lt;button class=\"btn btn-warning\" onclick=\"beliProduk('Sepatu Sneakers')\"&gt;Beli&lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"col-md-4\"&gt;\n      &lt;div class=\"card mb-3\"&gt;\n        &lt;img src=\"https:\/\/images.unsplash.com\/photo-1585386959984-a4155228c6d4\" class=\"card-img-top\"&gt;\n        &lt;div class=\"card-body text-center\"&gt;\n          &lt;h5 class=\"card-title\"&gt;Tas Ransel&lt;\/h5&gt;\n          &lt;p class=\"card-text\"&gt;Rp 120.000&lt;\/p&gt;\n          &lt;button class=\"btn btn-warning\" onclick=\"beliProduk('Tas Ransel')\"&gt;Beli&lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<p>Penjelasan sederhana:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Class Bootstrap<\/th><th>Fungsi<\/th><\/tr><\/thead><tbody><tr><td><code>row<\/code><\/td><td>Baris layout<\/td><\/tr><tr><td><code>col-md-4<\/code><\/td><td>Kolom (3 produk sejajar)<\/td><\/tr><tr><td><code>card<\/code><\/td><td>Kotak produk<\/td><\/tr><tr><td><code>btn btn-warning<\/code><\/td><td>Tombol siap pakai<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Tanpa CSS tambahan, produk langsung rapi dan sejajar.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&#x1f535; Langkah 5 \u2013 Mempercantik Form dengan Bootstrap<\/h2>\n\n\n\n<p>Ubah form menjadi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;section id=\"kontak\" class=\"mt-4\"&gt;\n  &lt;h2&gt;Hubungi Kami&lt;\/h2&gt;\n\n  &lt;form class=\"w-50\"&gt;\n    &lt;div class=\"mb-3\"&gt;\n      &lt;label class=\"form-label\"&gt;Nama&lt;\/label&gt;\n      &lt;input type=\"text\" class=\"form-control\"&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"mb-3\"&gt;\n      &lt;label class=\"form-label\"&gt;Email&lt;\/label&gt;\n      &lt;input type=\"email\" class=\"form-control\"&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"mb-3\"&gt;\n      &lt;label class=\"form-label\"&gt;Pesan&lt;\/label&gt;\n      &lt;textarea class=\"form-control\" rows=\"4\"&gt;&lt;\/textarea&gt;\n    &lt;\/div&gt;\n\n    &lt;button class=\"btn btn-primary\"&gt;Kirim&lt;\/button&gt;\n  &lt;\/form&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<p>Sekarang form terlihat seperti website profesional.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">&#x1f535; Pendalaman Bootstrap &amp; Grid System<\/h1>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cBootstrap adalah kumpulan alat siap pakai untuk membuat website rapi,<br>modern, dan otomatis menyesuaikan ukuran layar (HP, tablet, laptop).\u201d<\/p>\n<\/blockquote>\n\n\n\n<p>Konsep terpenting dalam Bootstrap adalah <strong>Grid System<\/strong>.<\/p>\n\n\n\n<p>Grid System bekerja seperti <strong>kotak-kotak pembagi halaman<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Container\n  \u2514\u2500\u2500 Row\n        \u251c\u2500\u2500 Col\n        \u251c\u2500\u2500 Col\n        \u2514\u2500\u2500 Col\n<\/code><\/pre>\n\n\n\n<p>Artinya:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>container<\/code> \u2192 pembungkus utama halaman<\/li>\n\n\n\n<li><code>row<\/code> \u2192 baris<\/li>\n\n\n\n<li><code>col<\/code> \u2192 kolom di dalam baris<\/li>\n<\/ul>\n\n\n\n<p>Dengan pola ini, kita bisa membagi layar menjadi beberapa bagian secara rapi.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Struktur Dasar Bootstrap<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"row\"&gt;\n    &lt;div class=\"col\"&gt;Kolom 1&lt;\/div&gt;\n    &lt;div class=\"col\"&gt;Kolom 2&lt;\/div&gt;\n    &lt;div class=\"col\"&gt;Kolom 3&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>Penjelasan sederhana:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>container<\/code> \u2192 membuat konten berada di tengah dan tidak menempel layar<\/li>\n\n\n\n<li><code>row<\/code> \u2192 satu baris<\/li>\n\n\n\n<li><code>col<\/code> \u2192 kolom yang akan dibagi rata otomatis<\/li>\n<\/ul>\n\n\n\n<p>Hasilnya:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Layar dibagi menjadi 3 bagian sejajar<\/li>\n\n\n\n<li>Di HP, kolom bisa turun ke bawah otomatis<\/li>\n\n\n\n<li>Di laptop, kolom berjajar ke samping<\/li>\n<\/ul>\n\n\n\n<p>Inilah yang disebut <strong>responsif<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Mengatur Jumlah Kolom<\/h2>\n\n\n\n<p>Bootstrap membagi layar menjadi <strong>12 bagian<\/strong>.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\"&gt;\n  &lt;div class=\"col-md-4\"&gt;Produk 1&lt;\/div&gt;\n  &lt;div class=\"col-md-4\"&gt;Produk 2&lt;\/div&gt;\n  &lt;div class=\"col-md-4\"&gt;Produk 3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>Karena:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>4 + 4 + 4 = 12<\/code><\/li>\n<\/ul>\n\n\n\n<p>Maka akan muncul <strong>3 kolom sejajar<\/strong> di layar besar.<br>Di layar kecil (HP), kolom akan otomatis turun ke bawah.<\/p>\n\n\n\n<p>Penjelasan:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cKita tidak perlu menghitung lebar pakai persen.<br>Bootstrap sudah mengaturnya untuk kita.\u201d<\/p>\n<\/blockquote>\n\n\n\n<p>Berikut <strong>kode HTML lengkap<\/strong> yang sudah memanggil <strong>CSS dan JavaScript Bootstrap<\/strong> melalui CDN, sekaligus memperlihatkan struktur dasar <code>container \u2192 row \u2192 col<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"id\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;title&gt;Bootstrap Dasar&lt;\/title&gt;\n\n    &lt;!-- CSS Bootstrap --&gt;\n    &lt;link \n        href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css\" \n        rel=\"stylesheet\"&gt;\n\n&lt;\/head&gt;\n&lt;body&gt;\n\n    &lt;!-- Navbar Bootstrap --&gt;\n    &lt;nav class=\"navbar navbar-expand-lg navbar-dark bg-primary\"&gt;\n        &lt;div class=\"container\"&gt;\n            &lt;a class=\"navbar-brand\" href=\"#\"&gt;Toko Online SMK&lt;\/a&gt;\n        &lt;\/div&gt;\n    &lt;\/nav&gt;\n\n    &lt;!-- Konten Utama --&gt;\n    &lt;div class=\"container mt-4\"&gt;\n        &lt;h2&gt;Contoh Grid System&lt;\/h2&gt;\n\n        &lt;div class=\"row\"&gt;\n            &lt;div class=\"col-md-4\"&gt;\n                &lt;div class=\"p-3 border text-center\"&gt;Kolom 1&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"col-md-4\"&gt;\n                &lt;div class=\"p-3 border text-center\"&gt;Kolom 2&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"col-md-4\"&gt;\n                &lt;div class=\"p-3 border text-center\"&gt;Kolom 3&lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;!-- JavaScript Bootstrap --&gt;\n    &lt;script \n        src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;\n    &lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Penjelasan singkat untuk siswa:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Baris ini memanggil <strong>CSS Bootstrap<\/strong>: <code>&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"><\/code><\/li>\n\n\n\n<li>Baris ini memanggil <strong>JavaScript Bootstrap<\/strong>: <code>&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js\">&lt;\/script><\/code><\/li>\n\n\n\n<li>Struktur utama Bootstrap: <br><code>&lt;div class=\"container\"> <\/code><br>   <code>&lt;div class=\"row\"> <\/code><br>       <code>&lt;div class=\"col-md-4\">...&lt;\/div> <\/code><br>   <code>&lt;\/div> <\/code><br><code>&lt;\/div><\/code><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap adalah framework CSS populer yang digunakan untuk membuat halaman web yang responsif dan modern dengan lebih mudah dan cepat. Bootstrap menyediakan banyak class siap pakai untuk styling, layout, dan komponen interaktif, sehingga mengurangi kebutuhan untuk menulis CSS dari nol. 1. Mengenal CSS Framework CSS Framework adalah kumpulan kode CSS yang siap pakai untuk mempercepat [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":974,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[107,38],"tags":[108,101,100,109,110],"class_list":["post-1367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-framework-bootstrap","category-tutorial-programming","tag-bootstrap","tag-cascading-style-sheets","tag-css","tag-css-framework","tag-grid-system"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Belajar Bootstrap (CSS Framework) - Gurututorku<\/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:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar Bootstrap (CSS Framework) - Gurututorku\" \/>\n<meta property=\"og:description\" content=\"Bootstrap adalah framework CSS populer yang digunakan untuk membuat halaman web yang responsif dan modern dengan lebih mudah dan cepat. Bootstrap menyediakan banyak class siap pakai untuk styling, layout, dan komponen interaktif, sehingga mengurangi kebutuhan untuk menulis CSS dari nol. 1. Mengenal CSS Framework CSS Framework adalah kumpulan kode CSS yang siap pakai untuk mempercepat [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"Gurututorku\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-21T01:30:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-21T01:46:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css-bootstrap.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"gtadmin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"gtadmin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/\"},\"author\":{\"name\":\"gtadmin\",\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\"},\"headline\":\"Belajar Bootstrap (CSS Framework)\",\"datePublished\":\"2026-01-21T01:30:16+00:00\",\"dateModified\":\"2026-01-21T01:46:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/\"},\"wordCount\":658,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\"},\"image\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css-bootstrap.png\",\"keywords\":[\"bootstrap\",\"Cascading Style Sheets\",\"css\",\"css framework\",\"grid system\"],\"articleSection\":[\"CSS Framework Bootstrap\",\"Tutorial Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/\",\"url\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/\",\"name\":\"Belajar Bootstrap (CSS Framework) - Gurututorku\",\"isPartOf\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css-bootstrap.png\",\"datePublished\":\"2026-01-21T01:30:16+00:00\",\"dateModified\":\"2026-01-21T01:46:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#primaryimage\",\"url\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css-bootstrap.png\",\"contentUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css-bootstrap.png\",\"width\":1000,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/gurututorku.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Belajar Bootstrap (CSS Framework)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/gurututorku.com\/blog\/#website\",\"url\":\"https:\/\/gurututorku.com\/blog\/\",\"name\":\"Gurututorku - Learning today success tomorrow\",\"description\":\"Kelas dan Kursus Programming, Design, Multimedia dan Tutorial IT lainnya.\",\"publisher\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/gurututorku.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\",\"name\":\"gtadmin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png\",\"contentUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png\",\"width\":512,\"height\":512,\"caption\":\"gtadmin\"},\"logo\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/gurututorku.com\/blog\"],\"url\":\"https:\/\/gurututorku.com\/blog\/author\/gtadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar Bootstrap (CSS Framework) - Gurututorku","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:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/","og_locale":"en_US","og_type":"article","og_title":"Belajar Bootstrap (CSS Framework) - Gurututorku","og_description":"Bootstrap adalah framework CSS populer yang digunakan untuk membuat halaman web yang responsif dan modern dengan lebih mudah dan cepat. Bootstrap menyediakan banyak class siap pakai untuk styling, layout, dan komponen interaktif, sehingga mengurangi kebutuhan untuk menulis CSS dari nol. 1. Mengenal CSS Framework CSS Framework adalah kumpulan kode CSS yang siap pakai untuk mempercepat [&hellip;]","og_url":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/","og_site_name":"Gurututorku","article_published_time":"2026-01-21T01:30:16+00:00","article_modified_time":"2026-01-21T01:46:49+00:00","og_image":[{"width":1000,"height":750,"url":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css-bootstrap.png","type":"image\/png"}],"author":"gtadmin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"gtadmin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#article","isPartOf":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/"},"author":{"name":"gtadmin","@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2"},"headline":"Belajar Bootstrap (CSS Framework)","datePublished":"2026-01-21T01:30:16+00:00","dateModified":"2026-01-21T01:46:49+00:00","mainEntityOfPage":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/"},"wordCount":658,"commentCount":0,"publisher":{"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2"},"image":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css-bootstrap.png","keywords":["bootstrap","Cascading Style Sheets","css","css framework","grid system"],"articleSection":["CSS Framework Bootstrap","Tutorial Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/","url":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/","name":"Belajar Bootstrap (CSS Framework) - Gurututorku","isPartOf":{"@id":"https:\/\/gurututorku.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#primaryimage"},"image":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css-bootstrap.png","datePublished":"2026-01-21T01:30:16+00:00","dateModified":"2026-01-21T01:46:49+00:00","breadcrumb":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#primaryimage","url":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css-bootstrap.png","contentUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css-bootstrap.png","width":1000,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/gurututorku.com\/blog\/belajar-bootstrap-css-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gurututorku.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Belajar Bootstrap (CSS Framework)"}]},{"@type":"WebSite","@id":"https:\/\/gurututorku.com\/blog\/#website","url":"https:\/\/gurututorku.com\/blog\/","name":"Gurututorku - Learning today success tomorrow","description":"Kelas dan Kursus Programming, Design, Multimedia dan Tutorial IT lainnya.","publisher":{"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gurututorku.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2","name":"gtadmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png","contentUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png","width":512,"height":512,"caption":"gtadmin"},"logo":{"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/gurututorku.com\/blog"],"url":"https:\/\/gurututorku.com\/blog\/author\/gtadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts\/1367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/comments?post=1367"}],"version-history":[{"count":7,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts\/1367\/revisions"}],"predecessor-version":[{"id":1377,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts\/1367\/revisions\/1377"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/media\/974"}],"wp:attachment":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/media?parent=1367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/categories?post=1367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/tags?post=1367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}