Cara menggunakan bootstrap 5 w3schools

Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites.

Bootstrap 5 is completely free to download and use!

Start learning Bootstrap 5 now »

Learn Bootstrap 5


Try it Yourself Examples

This 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 Example

Try it Yourself »

Click on the "Try it Yourself" button to see how it works.


Bootstrap 5 vs. Bootstrap 3 & 4

Bootstrap 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 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.

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.

Cara menggunakan bootstrap 5 w3schools

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:

  • https://www malasngoding com/grid-system-bootstrap-4/
  • Cara mengatur grid bootstrap 4 untuk layar hanfphone
  • cara mengatur col pada bootsrap
  • membuat/grid bootstrap
  • Membuat grid bootstrap responsive
  • penggunaan sm md
  • grid bootstrap
  • membuat layout pada bootstrap
  • cara membuat layout dengan grid system
  • система сеток bootstrap 5


  • SHARE :

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.

  • Author's profile
  • All posts by Diki Alfarabi Hadi

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

  • Cara menggunakan bootstrap 5 w3schools
    Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
  • Cara menggunakan bootstrap 5 w3schools
    Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
  • Cara menggunakan bootstrap 5 w3schools
    Source Code Toko Sport PHP dan MySQLi Rp 200,000
  • Cara menggunakan bootstrap 5 w3schools
    Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000

Tutorial Terbaru

  • Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
  • Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
  • Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
  • Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
  • Membuat QR Code Dengan PHP August 3, 2022

Toko Kami

Cara menggunakan bootstrap 5 w3schools
Cara menggunakan bootstrap 5 w3schools
Cara menggunakan bootstrap 5 w3schools

SOCIAL

Malas Ngoding

TUTORIAL MENARIK LAINNYA

Cara menggunakan bootstrap 5 w3schools

Bootstrap 4

Tutorial Bootstrap 4 #35 : Border Bootstrap 4

22 October 2019

Border 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

Cara menggunakan bootstrap 5 w3schools

Bootstrap 4

Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4

13 September 2019

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

Cara menggunakan bootstrap 5 w3schools

Bootstrap 4

Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4

9 September 2019

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

Cara menggunakan bootstrap 5 w3schools

Bootstrap 4

Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4

7 September 2019

Spinners Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dasar untuk pemula. setelah sebelumnya kita belajar tentang komponen scrollspy bootstrap, Untuk melanjutkan ...

Apa itu Bootstrap 5?

Tentang Kelas. Bootstrap adalah sebuah framework yang paling populer digunakan untuk membuat sebuah website. Bootstrap membuat front-end developer dapat membuat website dengan cepat, fokus pada responsive mobile, dan membuat website menjadi lebih interaktif tanpa membuat banyak CSS dan JavaScript dari nol.

Apa yang baru di bootstrap 5?

Ada beberapa hal baru di Bootstrap 5 dan update yang bisa Anda temukan, yaitu:.
Logo dan Tampilan Dokumentasi Baru. ... .
2. jQuery Tidak Lagi Digunakan. ... .
Penghentian Support untuk Browser Lama. ... .
4. Dukungan untuk Tampilan Right-To-Left (RTL) ... .
Bootstrap Icons. ... .
6. Update pada Elemen Form. ... .
7. Update pada Grid System. ... .
Update pada Navbar..

Apa yg dimaksud bootstrap?

Bootstrap adalah framework web development berbasis HTML, CSS, dan JavaScript yang dirancang untuk mempercepat proses pengembangan web responsive dan mobile-first (memprioritaskan perangkat seluler).