Apa itu sistem grid pada bootstrap?

Daftar isi

• 1 Ada berapakah jumlah grid system pada Bootstrap?
• 2 Berapa kolom maksimal dalam 1 baris di Bootstrap?
• 3 Apa itu grid di Bootstrap?
• 4 Apa itu grid pada Bootstrap?
• 5 Apa itu sistem grid pada peta?
• 6 Apa yang dimaksud grid simetris?

Pada bootstrap memiliki 12 grid (bagian), dengan 12 grid ini anda dapat mengatur tingkat responsive dari halaman web pada saat menyesuaikan resolusi dari device yang mengakses halaman web.

Berapa kolom maksimal dalam 1 baris di Bootstrap?

Penerapan sistem grid Bootstrap container atau . container-fluid, .row maksimal berisikan 12 kolom, dan jika ingin membagi .row menjadi ukuran yang sama maka harus membagi 12 kolom dengan jumlah kolom yang ingin dibuat.

Manakah Class pada Bootstrap yang digunakan untuk membuat sistem grid?

Untuk membuat Bootstrap grid system, kita butuh setidaknya 3 buah class, yakni class . container sebagai penampung struktur terluar, class .row untuk membuat baris grid, serta class .col untuk membuat kolom grid.

Apa itu Grid System Bootstrap?

Apa itu Sistem Grid di Bootstrap? Sistem Grid adalah sistem yang digunakan Bootstrap untuk mengatur tata letak (layout). Sistem ini terdiri dari 12 kolom dan 6 breakpoint. Satu kolom penuh panjangnya adalah 12.

Apa itu grid di Bootstrap?

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.

Apa itu grid pada Bootstrap?

Sistem Grid adalah sistem yang digunakan Bootstrap untuk mengatur tata letak (layout). Sistem ini terdiri dari 12 kolom dan 6 breakpoint. Satu kolom penuh panjangnya adalah 12. Jika kolom dibagi dua maka panjangnya akan menjadi 6.

Apa itu SM pada Bootstrap?

col adalah singkatan dari col ( coloums ) atau kolom. sm adalah singkatan dari untuk layar tablet yang artinya small.

Apa itu Bootstrap grid?

Apa itu sistem grid pada peta?

Sebuah grid adalah hubunga garis tegak lurus pada peta untuk memberikan orientasi spasial dengan muda pada pembaca peta. Garis dapat digunakan untuk referensi. Misalnya, garis grid dapat merepresentasikan lintang dan bujur.

Apa yang dimaksud grid simetris?

symetrical gird adalah struktur dua demensi yang terdiri dari sumbu horisontal dan sumbu vertikal sehingga akan tersusun kolom dan baris. Sistem Grid pada awalnya digunakan dalam dunia percetakan.

Membuat layout dengan sistem grid bootstrap – Layout merupakan bagian penting dalam mendesain tampilan sebuah web. Ibarat membangun rumah layout adalah kerangka dari rancangan rumah yang ingin dibuat. Dengan menggunakan layout kita dapat mengatur rencana tampilan web dengan rapi dan terstruktur. Bootstrap mempunyai fasilitas untuk membuat layout dengan mudah. Layout yang dibuatpun support pada responsive desain. Dengan menggunakan sistem grid pada bootstrap kita dapat membuat layout yang responsive dengan cukup mudah untuk diterapkan pada website kita.

Rekomendasi Bacaan untuk anda:

• Pengenalan Bootstrap
• Cara menggunakan / implementasi bootstrap pada website

Memahami Sistem Grid pada Bootstrap

Didalam bootstrap terdapat 12 grid untuk keseluruhan halaman. Kita dapat membuat 12 kolom untuk mengisi keseluruhan halaman. Namun bila kita hanya ingin membuat beberapa kolom saja, tentu saja itu bisa dilakukan dengan kolom yang lebih luas pada halaman web tersebut.

Dari gambar ilustrasi diatas saya coba menggambarkan bagaimana struktur layout menggunakan grid bootstrap. Apabila kita ingin membuat kolom dengan span1 maka untuk mengisi seluruh halaman web perlu membuat 12 kolom. Begitu juga bila membuat span kolom 2 maka perlu kita membuat 6 kolom. Begitu juga seterusnya.

Pada umumnya sebuah web mempunyai struktur Header, silebar, konten dan footer oleh karena itu berdasarkan struktur tersebut kita dapat membuat seperti contoh gambar dibawah, nantinya akan kita coba belajar membuat layout seperti ini

Mengenal Class Grid pada Bootstrap

Didalam bootstrap terbagi beberapa class untuk membuat layout menggunakan sistem grid

Mengenal Class Container pada Bootstrap

Bootstrap mempunyai class container, class ini digunakan untuk menampung setiap elemen grid yang kita buat menggunakan bootstrap. Terdapat dua jenis class container

1. Class Container
   Merupakan class container default untuk menampung atau bisa saya bilang membungkus grid sistem.
2. Class Container-fluid
   Merupakan class container yang kedua, dengan container fluid setiap grid akan dibungkus, dan diisi penuh untuk seluruh layar.

Apa perbedaan kedua class container diatas ?

Perbedaan mendasar dari class container dengan class container fluid adalah pada penyajian layout container terdapat jarak kurang lebih masing-masing 20% dari sisi kanan maupun kiri layar monitor komputer kita.

Sedangkan untuk Container fluid, kita tau arti kata fuild dalam bahasa indonesia adalah cair dengan demikian bisa kita artikan dengan container fluid akan mengisi semua ruang (karena bersifat cair) yang ada pada elemen layout halaman web kita.

Contoh Class Container

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Halaman Web sederhana menggunakan Container</h2>
  <p>Untuk melihat efek dapat mengecilkan ukuran layar browser, layout akan otomatis mengikuti ukuran layar</p>
</div>

</body>
</html> 

Pada contoh diatas perhatikan pada syntax <div class=”container”> saya menggunakan container default. Seperti yang sudah saya jelaskan dengan menggunakan container ini maka akan ada space ruang kosong pada sisi kiri dan kanan layar, Lebih jelasnya dapat dilihat pada hasil output dibawah ini:

Contoh Class Container Fluid

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h2>Halaman Web sederhana menggunakan Container</h2>
  <p>Untuk melihat efek dapat mengecilkan ukuran layar browser, layout akan otomatis mengikuti ukuran layar</p>
</div>

</body>
</html> 

Perhatikan contoh syntax diatas pada bagian <div class=”container-fluid”> saya menggunakan container fluid (cair) dan lihat hasilnya pada gambar dibawah setiap elemen akan diisi sehingga tidak ada ruang kosong yang tidak digunakan.

Belajar membuat layout sederhana dengan sistem grid dan container

Setelah kita belajar teori-teori diatas selanjutnya saya akan contohkan bagaimana membuat layout sederhana dengan sistem grid dan container. Contoh layout yang akan kita buat adalah seperti pada gambar diatas layout sederhana yang terdiri dari header, silebar, konten dan footer dengan implementasi sitem grid dan container. Pada contoh ini saya menggunakan container default bukan container fluid.

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

<div class="container">
	<div class="row">
		<div class="col-md-12" style="background-color:AntiqueWhite ;">
		 <h2><center>Judul Halaman</center></h2>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3" style="background-color:GreenYellow;">
		<h2>Silebar</h2>
		<p>Link 1</p>
		<p>Link 2</p>
		<p>Link 3</p>
		<p>Link 4</p>
		</div>
		<div class="col-md-9" style="background-color:LightCyan;">
			<h2>Konten</h2>
			<p>Konten website dapat diisi pada bagian ini</p>
		</div>
	</div>
	<div class="row"style="background-color:MediumPurple;" >
		<div class="col-md-12">
		<h2><center>Footer</center></h2>
		</div>
		
	</div>
</div>

</body>
</html> 

Dari contoh diatas kita dapat melihat saya menggunakan class container kemudian saya juga menggunakan class row (<div class=’row’>), oh ya class ini digunakan untuk membuat baris pada halaman html kita. pada baris pertama saya membuat sebuah grid dengan span 12 artinya bahwa memakai semua kolom pada sistem grid di bootstrap. Sehingga akan penuh pada kontainnernya. Pada baris kedua saya membagi grid kedalam 2 kolom. Kolom yang pertama saya set 3 grid dan kolom kedua 9 grid, sehingga terpenuhlah 12 grid. Terakhir untuk footer saya membuat 1 kolom menggunakan semua grid (12). Sehingga dari syntax diatas dapat terlihat layout sederhananya seperti pada gambar berikut

Kesimpulan

Dengan membuat layout dengan sistem grid dan container pada bootstrap akan dengan mudah kita buat dan gunakan sesuai dengan kebutuhan desain layout yang ingin kita gunakan. Sistem grid akan membuat pemetaan pada layout website dengan maksimal grid 12. saya tidak menyarankan ketika temen-temen membuat layout dengan grid kurang atau bahkan lebih dari 12 grid. Pastikan setiap baris nilai gridnya harus 12, agar layout yang kita buat sesuai dan tidak berantakan. Dengan kontainer juga kita bisa membuat istilah saya bisa katakan fondasi untuk layout yang ingin kita buat. Demikian pembahasan Kelas Programmer kali ini silahkan komentar anda bisa diisi pada kolom dibawah ini.

Apa yang dimaksud dengan grid System Bootstrap?

Ada berapakah jumlah grid system pada bootstrap?

Div class Container untuk apa?

Apa itu Col LG dan Col MD?