Membuat layout dengan Sistem Grid & Container Bootstrap

Ditulis Oleh:
membuat layout dengan sistem grid dan container bootstrap

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:

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.

sistem grid pada bootstrap

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

ilustrasi layout sederhana

Mengenal Class Grid pada Bootstrap

Didalam bootstrap terbagi beberapa class untuk membuat layout menggunakan sistem grid

Grid ClassKeterangan
colUntuk ukuran yang sangat kecil, kurang dari 576px
col-smUkuran kecil, untuk 576px atau lebih
col-mdUkuran medium, untuk 768px atau lebih
col-lgUkuran besar, untuk 992px atau lebih
col-xlUkuran sangat besar, untuk 1200px atau lebih

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">
  <h1>Halaman Web sederhana menggunakan Container</h1>
  <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:

layout dengan container

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">
  <h1>Halaman Web sederhana menggunakan Container</h1>
  <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.

layout dengan container fluid

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 ;">
		 <h1><center>Judul Halaman</center></h1>
		</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

layout sederhana implementasi grid sistem dan container pada bootstrap

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.

Setiawan Dimas

Interested on Programming, especially on Website Developping.
Have a bachelor degree from STIMIK Akakom Yogyakarta, majoring in Technical Information.
Focus on Content Writer Programming Website and Internet Marketing
Setiawan Dimas