#Bootstrap 4

Tutorial Bootstrap 4 #4 : Grid System Bootstrap 4

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 4

Grid 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 :

.col-*
digunakan untuk mengatur grid secara otomatis
.col-sm-*
digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran kecil ( >=576px )
.col-md-*
digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran sedang ( >=720px )
.col-lg-*
digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran besar ( >=992px )
.col-xl-*
digunakan untuk mengatur grid pada ukuran layar monitor yang berukuran ekstra besar ( >=1200px )

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 4

Contoh pertama ini kita akan menggunakan class .col-md-*, nanti teman-teman bisa bereksperimen sendiri.

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>

<title>Tutorial Grid System Bootstrap 4 - www.malasngoding.com</title>

</head>

<body>

<h3>Grid Bootstrap</h3>

<h4>www.malasngoding.com</h4>

</center>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

</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

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.