Memahami Dasar-dasar Layout didalam Bootstrap 5 - ambiskode

Pendahuluan

Bootstrap merupakan framework atau kerangka kerja dari HTML, CSS, dan JavaScript. Mungkin kita mengetahuinya Bootstrap ini hanya merupakan Framework dari CSS saja. Namun sebenarnya, Bootstrap ini merupakan gabungan dari ketiga komponen diatas. 

Bootstrap dirancang untuk membuat tampilan situs web yang responsif, yang berarti tampilan situs / web yang kita buat akan terlihat bagus (kondisional) sesuai dengan perangkat yang digunakan, termasuk di desktop, laptop, tablet, maupun di smartphone. Tujuan utama dibentuknya Bootstrap ini memang desain khusus untuk perangkat lunak mobile (mobile friendly).

Beberapa kelebihan dari Bootstrap sendiri adalah:

• Desain responsif: Bootstrap dapat digunakan untuk membuat situs web yang terlihat responsif di semua ukuran layar, termasuk perangkat seluler dan tablet.
• Tata letak grid: Bootstrap menyediakan tata letak grid yang dapat digunakan untuk membuat situs web yang terstruktur dan mudah dinavigasi.
• Komponen: Bootstrap menyediakan berbagai komponen yang dapat digunakan untuk membuat situs web yang kaya fitur, seperti tombol, formulir, dan tabel.
• JavaScript: Bootstrap menyediakan berbagai fungsi JavaScript yang dapat digunakan untuk menambahkan interaksi ke situs web.

Fitur-fitur yang lengkap dan juga kemudahan pemakaian framework ini, membuat Bootstrap menjadi salah satu framework stylesheet yang populer didunia.

Syntax Penulisan

Pada Bootstrap, value atau nilai dari style yang akan digunakan ditulis secara inline.

Berbeda halnya ketika kita menulis style yang ada di CSS, yang dimana style-nya dapat ditulis secara inline text, secara Eksternal, maupun Internal.

		
  	/* Penulisan syntax CSS

  	.class{	
    		color: blue;
        font-size: 17px;
        margin: auto;
		}
    

    <p style="color:blue; margin:10px;">Hello World!</p>
  

Sedangkan didalam Bootstrap ini penulisan style-nya ditulis secara inline text, Dengan menggunakan tag <div></div> sebagai pembungkusnya.

		
  	/* Penulisan syntax Bootstrap

    <div class="text-center">
    	Hello World!
    </div>
  

class merupakan atribut, sedangkan text-center merupakan value-nya.

Sebelum lanjut lebih jauh pada materi Bootstrap ini, usahakan kalian telah paham konsep dasar CSS terlebih dahulu.

Container Bootstrap

Konsep dasar Layout Bootstrap yang pertama yaitu container. Sama seperti artinya, Container merupakan wadah, penampung, atau kotak. Container ini merupakan wadah yang digunakan untuk menampung berbagai elemen atau komponen-komponen konten yang ada didalamnya.

Kita dapat membuat Cointainer ini untuk berbagai macam komponen dalam satu halaman.

Berikut merupakan syntax penulisan Container didalam program.

		 	
    <div class="container">
    	<!--Content Here-->
    </div>
  

Container sendiri memiliki ukuran / lebar yang dapat di-Custom sendiri, dengan table breakpoint sebagai berikut.

Breakpoint	Class Infix	Dimensions
Extra small	container	< 576px
Small	container-sm	>= 576px
Medium	container-md	>= 768px
Large	container-lg	>= 992px
Extra Large	container-xl	>= 1200px
Extra extra large	container-xxl	>= 1400px
Fluid	container-fluid	All Dimensions

Tabel diatas menjelaskan ukuran lebar dimensi / halaman yang dapat menampilkan container sesuai keadaan aslinya.

Misal, container-sm akan terlihat asli (small) apabila lebar halaman >= 576 px.

Jika lebar halaman < 576 px, maka akan tampil menyempit dan memuhi halaman.

Perhatikan program berikut.

		 	
    <div class="container-sm">
    	<div class="row">
    		<div class="col">
    			Column 1
    		</div>
        <div class="col">
    			Column 2
    		</div>
        <div class="col">
    			Column 3
    		</div>
    	</div>
    </div>
  

Pada program diatas, kita membuat tiga elemen didalam container-sm.

Jika lebar layar < 576 px, akan menghasilkan tampilan sebagai berikut.

Jika lebar layar >= 576 px, akan menghasilkan tampilan.

Untuk container-fluid, tampilan akan mengisi layar secara penuh berapapun itu lebar layarnya.

Grid Bootstrap

Setelah kita berhasil membuat Container atau wadahnya, saatnya kita untuk mengisi wadah tersebut dengan berbagai elemen.

Elemen-elemen yang dimuat didalam container ini, dibentuk berdasarkan Grid-grid-nya.

Grid ini merupakan kolom-kolom yang menyusun tampilan elemen halaman didalam web.

Terdapat maksimal 12 kolom yang dapat kita buat untuk satu halaman penuh.

Berikut merupakan contoh pembuatan grid elemen didalam program

		 	
    <div class="container">
    	<div class="row">
    		<div class="col">
    			Column 1
    		</div>
        <div class="col">
    			Column 2
    		</div>
        <div class="col">
    			Column 3
    		</div>
    	</div>
    </div>
  

Program diatas kita membuat 3 kolom sama besar, dengan satu row / satu baris saja yang kita buat.

Akan menghasilkan tampilan.

Selanjutnya kita akan membuat banyak baris kolom dengan model grid yang berbeda-beda.

Perhatikan program berikut.

		 	
    <div class="container">
    	<div class="row">
    		<div class="col-6">
    			Column 1
    		</div>
        <div class="col-4">
    			Column 2
    		</div>
        <div class="col-2">
    			Column 3
    		</div>
    	</div>
      <div class="row">
    		<div class="col">
    			Column 1
    		</div>
        <div class="col col-sm-8">
    			Column 2
    		</div>
        <div class="col">
    			Column 3
    		</div>
    	</div>
    </div>
  

Ukuran grid juga dapat kita sesuaikan dengan kebutuhan, Misal elemen pertama kita buat dengan ukuran grid 6 atau 6 kolom, lalu elemen kedua kita buat dengan ukuran 4 kolom, dan elemen ketiga dengan 2 kolom.

Pastikan bahwa grid yang kita buat tidak melebihi 12 kolom.

Selain itu, Kita juga dapat menambahakan ukuran grid berdasarkan ukuran breakpoint yang sudah didefinisikan oleh Bootstrap.

Pada row kedua, Column 2 kita setting grid-nya dengan breakpoint col-sm-8 (column small) dengan ukuran grid sebanyak 8 kolom, dan untuk grid / kolom disampingnya ukurannya akan menyesuaikan.

col col-sm-8 artinya, col yang pertama untuk membuat kolom grid, sedangkan col-sm-8 yang kedua untuk membuat ukuran kolom grid.

Akan menghasilkan tampilan

Selain membuat baris kolom grid seperti contoh diatas, kita juga dapat membuatnya sebagai berikut.

		 	
    <div class="container">
    	<div class="row row-cols-2">
    		<div class="col">
    			Column 1
    		</div>
        <div class="col">
    			Column 2
    		</div>
        <div class="col">
    			Column 3
    		</div>
        <div class="col">
    			Column 4
    		</div>
    	</div>
    </div>
  

Dengan memasukkan value row-cols-[banyakKolom] kita dapat menampilkan jumlah kolom sesuai keinginan.

Sama seperti sebelumnya, row row-cols-2, row yang pertama untuk membuat baris, row-cols-2 yang kedua untuk membuat ukuran banyak kolom

Contoh diatas akan menampilkan hasil.

		 	
    <div class="container">
    	<div class="row row-cols-3">
    		<div class="col">
    			Column 1
    		</div>
        <div class="col">
    			Column 2
    		</div>
        <div class="col">
    			Column 3
    		</div>
        <div class="col">
    			Column 4
    		</div>
    	</div>
      <div class="row row-cols-1">
    		<div class="col">
    			Column 1
    		</div>
        <div class="col">
    			Column 2
    		</div>
        <div class="col">
    			Column 3
    		</div>
        <div class="col">
    			Column 4
    		</div>
    	</div>
    </div>
  

Akan menghasilkan tampilan.