Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites. Show
Bootstrap 5 is completely free to download and use! Start learning Bootstrap 5 now » Learn Bootstrap 5 Try it Yourself ExamplesThis tutorial contains hundreds of Bootstrap 5 examples. With our online editor, you can edit the code, and click on a button to view the result. Bootstrap 5 ExampleTry it Yourself »Click on the "Try it Yourself" button to see how it works. Bootstrap 5 vs. Bootstrap 3 & 4Bootstrap 5 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness. Bootstrap 5 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 11 and down is not supported. The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched to JavaScript instead of jQuery. Note: Bootstrap 3 and Bootstrap 4 is still supported by the team for critical bugfixes and documentation changes, and it is perfectly safe to continue to use them. However, new features will NOT be added to them. Grid System Bootstrap 4 – Selamat datang kembali di tutorial bootstrap 4 lengkap berbahasa indonesia. Tutorial ini merupakan tutorial bagian ke 4 dalam seri tutorial bootstrap 4 di malasngoding.com. Pada tutorial ini kita akan belajar tentang grid system pada bootstrao 4. Silahkan baca juga tutorial grid system pada bootstrap 3 yang sudah pernah dibahas sebelumnya untuk menambah referensi teman-teman. Ada beberapa perbedaan dari penggunaan grid system bootstrap 3 dan bootstrap 4. Apa saja perbedaan nya akan kita bahas pada artikel ini dengan membahas ulang dari dasar. Sehingga mudah-mudahan bisa memberikan pemahaman lebih tentang grid system pada bootstrap 4, sekaligus bisa memberikan pemaparan perbedaan antara grid system pada bootstrap versi 3 dan bootstrap versi 4. Grid System Bootstrap 4Grid system adalah sistem pengaturan lebar untuk masing-masing komponen yang ingin kita buat. pengaturan ini bertujuan untuk mengatur ke-responsive-an website yang kita buar. Jadi kita bisa mengaturnya sesuai yang kita inginkan dengan sangat mudah. tanpa harus menulis coding css secara manual untuk membuat halaman yang responsive. Ada 12 grid pada bootstrap. yang bisa kita analogikan sebagai 12 kotak yang bisa kita atur lebarnya dengan mudah. Ada beberapa jenis class dasar dari bootstrap 4 untuk mengatur grid, di antaranya adalah :
Pada urutan pertama ada class col-*, col-* digunakan untuk mengatur grid secara default. misalnya jika di akses dari layar yang berukuran kecil, besar ataupun ekstra besar, ukuran gridnya akan tetap dan tidak berubah. jadi mau dibuka dari ukuran layar berapa pun, hasilnya akan tetap mengikuti pengaturan grid col-* yang sudah ditetapkan. col-sm-* digunakan untuk mengatur grid jika halaman website diakses dari ukuran layar yang kecil seperti smartphone, maka pengaturan class col-sm-* lah yang akan digunakan. Masih bingung ? tenang. kita masuk ke contoh cara penggunaannya, agar teman-teman bisa melihat contoh perbedaan dari masing-masing grid di atas. Contoh Grid Bootstrap 4Contoh pertama ini kita akan menggunakan class .col-md-*, nanti teman-teman bisa bereksperimen sendiri. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Grid System Bootstrap 4 - www.malasngoding.com</title> </head> <body>
<div class="container-fluid">
<center> <h3>Grid Bootstrap</h3> <h4>www.malasngoding.com</h4> </center>
<div class="row">
<div class="col-md-12"> <div class="bg-primary text-center text-white">.col-md-12</div> <br/> </div>
<div class="col-md-6"> <div class="bg-primary text-center text-white">.col-md-6</div> <br/> </div>
<div class="col-md-6"> <div class="bg-primary text-center text-white">.col-md-6</div> <br/> </div>
<div class="col-md-4"> <div class="bg-primary text-center text-white">.col-md-4</div> <br/> </div>
<div class="col-md-4"> <div class="bg-primary text-center text-white">.col-md-4</div> <br/> </div>
<div class="col-md-4"> <div class="bg-primary text-center text-white">.col-md-4</div> <br/> </div>
<div class="col-md-3"> <div class="bg-primary text-center text-white">.col-md-3</div> <br/> </div>
<div class="col-md-3"> <div class="bg-primary text-center text-white">.col-md-3</div> <br/> </div>
<div class="col-md-3"> <div class="bg-primary text-center text-white">.col-md-3</div> <br/> </div>
<div class="col-md-3"> <div class="bg-primary text-center text-white">.col-md-3</div> <br/> </div>
<div class="col-md-2"> <div class="bg-primary text-center text-white">.col-md-2</div> <br/> </div>
<div class="col-md-2"> <div class="bg-primary text-center text-white">.col-md-2</div> <br/> </div>
<div class="col-md-2"> <div class="bg-primary text-center text-white">.col-md-2</div> <br/> </div>
<div class="col-md-2"> <div class="bg-primary text-center text-white">.col-md-2</div> <br/> </div>
<div class="col-md-2"> <div class="bg-primary text-center text-white">.col-md-2</div> <br/> </div>
<div class="col-md-2"> <div class="bg-primary text-center text-white">.col-md-2</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
<div class="col-md-1"> <div class="bg-primary text-center text-white">.col-md-1</div> <br/> </div>
</div>
</div>
<script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </html> Perhatikan pada contoh di atas, seperti biasa jika ingin menggunakan bootstrap, kita harus menghubungkannya terlebih dulu, silahkan teman-teman baca tutorial sebelumnya tentang cara menggunakan bootstrap 4. jika teman-teman belum membaca cara menghubungkan bootstrap. Oh ya, kita juga wajib menggunakan class row jika ingin menggunakan class grid system ini. seperti pada contoh coding di atas. Dan kita juga bisa menggunakan class containers (container atau container-fluid) untuk mengatur ukuran layout utamanya. BACA : Tutorial Bootstrap 4 #3 : Containers Pada Bootstrap 4 Pada contoh di atas saya membuat contoh penggunaan class col-md-*. karena kita belum akan belajar tentang grid masing-masing ukuran layar seperti yang diuraikan di atas, Karena fokus pertamanya agar teman-teman paham tentang konsep grid system pada bootstrap terlebih dulu. baru kemudian kita akan masuk ke class grid lainnya. Dimana sebelumnya saya sudah menyinggung kalau bootstrap memiliki 12 grid. jadi maksudnya sebuah halaman website dibagi menjadi 12 kotak atau bagian jika menggunakan bootstrap. Karena ini adalah trik dan solusi yang mudah dari bootstrap untuk membuat halaman website yang responsive. Langsung saja kita lihat hasil contohnya. Jalankan pada browser. Grid System Bootstrap 4 Perhatikan pada coding sebelumnya, dimana kita membuat berbagai class col-md-*, mulai dari col-md-1 sampai col-md-12. silahkan teman-teman lihat perbedaannya. karena setiap halaman memiliki 12 grid, maka jika kita menggunakan col-md-12, maka ukurannya akan penuh seukuran 12 grid (kotak biru pertama pada gambar). Begitu juga pada kotak di baris kedua, jika kita menggunakan col-md-6, maka ukurannya sebesar 6 grid. jadi ukurannya menjadi setengah dari 12. begitu juga seterusnya sampai col-md-1. LIHAT DEMO Grid System Bootstrap 4
Incoming search terms:
Diki Alfarabi Hadi Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Tags: belajar bootstrap grid, bootstrap grid generator, bootstrap grid template, bootstrap grid w3schools, bootstrap layout template, bootstrap responsive, bootstrap table, coding bootstrap, grid align bootstrap, grid responsive, Grid System Bootstrap, horizontal grid bootstrap, membuat website responsive dengan bootstrap, table bootstrap 4, table bootstrap 4 w3, table bootstrap 4 w3school, w3school bootstrap 4 Produk
Tutorial Terbaru
Toko KamiSOCIALMalas Ngoding TUTORIAL MENARIK LAINNYABorder Bootstrap 4 -Setelah sebelumnya dari tutorial bootstrap 4 bagian 1 sampai bagian 34, sudah dijelaskan tentang dasar-dasar dari bootstrap. Mulai dari pengenalan apa itu ... Diki Alfarabi Hadi Tooltips Bootstrap 4 – Selamat datang kembali di tutorial lengkap bootstrap 4 step by step untuk pemula sampai mahir di www.malasngoding.com. Setelah pada tutorial sebelumnya ... Diki Alfarabi Hadi Toasts Bootstrap 4 – Setelah sebelumnya pada tutorial bootstrap dasar untuk pemula, Dibahas tentang spinners bootstrap 4, maka pada tutorial ini akan dibahas lanjutannya, yaitu ... Diki Alfarabi Hadi Spinners Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dasar untuk pemula. setelah sebelumnya kita belajar tentang komponen scrollspy bootstrap, Untuk melanjutkan ... |