Cara menggunakan bootstrap col

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.

Cara menggunakan bootstrap col

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

Cara menggunakan bootstrap col

Mengenal Class Grid pada Bootstrap

Didalam bootstrap terbagi beberapa class untuk membuat layout menggunakan sistem grid

Grid ClassKeterangancolUntuk ukuran yang sangat kecil, kurang dari 576pxcol-smUkuran kecil, untuk 576px atau lebihcol-mdUkuran medium, untuk 768px atau lebihcol-lgUkuran besar, untuk 992px atau lebihcol-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:

Cara menggunakan bootstrap col

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.

Cara menggunakan bootstrap col

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

Cara menggunakan bootstrap col

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 itu Col pada bootstrap?

Class col berfungsi untuk membuat kolom. Class ini harus dibungkus oleh class row agar menjadi grid.

Apa itu Col LG dan Col MD?

col-md-xxx adalah class yang digunakan untuk mengatur grid layout pada layar monitor berukuran sedang. col-lg-xxx adalah class yang digunakan untuk mengatur grid layout pada layar desktop atau lebih besar.

Apa itu Col SM?

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.

Apa itu class Row?

Class row berfungsi untuk mengubah sifat dari div di dalamnya yang semula akan ditampilkan secara block, akan dapat ditampilkan secara inline. Maka dari itu div di dalamnya dapat dipaparkan secara horizontal. Class col berfungsi untuk mengubah div tersebut menjadi responsif terhadap lebar viewport.