Jika sebelumnya kita telah membahas tentang 05. Menggunakan Cdn Dalam Bootstrap 4, Maka kali ini kita akan membahas terkait grid system pada Bootstrap.
Grid pada Bootstrap
Grid system pada Bootstrap merupakan pengaturan ukuran yang ditampilkan pada monitor atau sistem yang mana fungsinya adalah untuk membuat pengaturan lebar dari sisi masing-masing komponen web, dan bootstrap juga memiliki 12 grid yang akan kita bahas, Yaitu:
1. col-lg-*
merupakan class prefix yang digunakan untuk mengatur grid pada monitor komputer yang berukuran besar
2. col-md-*
merupakan class prefix yang digunakan untuk mengatur grid pada layar monitor komputer yang berukuran sedang
3. col-sm-*
merupakan class prefix yang digunakan untuk mengatur grid pada yang berukuran tablet
4. col-xs-*
merupakan class prefix yang digunakan untuk mengatur grid untuk ukuran handphone
Contoh kode kolom:
<div class=”col-12″> </div>
(artinya ukuran kolom ini hanya 12)
<div class=”col-6> </div>
(artinya ukuran kolom ini hanya 6)
contoh kode container:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>sample container</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″ crossorigin=”anonymous” />
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anonymous”></script>
</head>
<body>
<header>
<div class=”container bg-info text-white”>
<h1>latihan container</h1>
</div>
</header>
</body>
</html>
Maka hasilnya akan terlihat seperti dibawah ini:
contoh kode ‘row’ dan ‘col’:
<div class=”row”>
<div class=”col”>
<!– kolom 1 –>
</div>
<div class=”col”>
<!– kolom 2 –>
</div>
</div>
<div class=”row”>
<div class=”col-md-12″>
<!– kolom 1 –>
</div>
</div>
Sampel Desain Website
silahkan copy kode dibawah ini guna membuat tampilan website seperti diatas, lalu save dengan format index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Contoh Layout 1 Kolom</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″ crossorigin=”anonymous” />
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anonymous”></script>
</head>
<body>
<header class=”container bg-primary text-white”>
<div class=”row”>
<div class=”col-12 py-4 text-center”>
<h1 class=”display-1″>Belajar Bootstrap</h1>
<p class=”lead”>Belajar khusus pemula bootstrap</p>
</div>
</div>
</header>
<main class=”container border”>
<div class=”row”>
<div class=”col-12 py-5″>
<h1>Membuat Layout Satu Kolom</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad reprehenderit libero unde ullam ducimus sunt, saepe fugit animi accusamus accusantium excepturi corrupti aut tenetur? Cumque quasi ratione ipsam facere quod?</p>
</div>
</div>
</main>
<footer class=”container bg-light”>
<div class=”row”>
<div class=”col-12 py-4″>© tutorial desain web</div>
</div>
</footer>
</body>
</html>
maka tampilanya akan jadi seperti dibawah ini
Nah, bagaimana jika ingin membuat tampilan seperti dibawah ini
maka kita hanya perlu mengubah
<header class=”container bg-primary text-white”>
<div class=”row”>
<div class=”col-12 py-4 text-center”>
dan juga
<main class=”container border”>
<div class=”row”>
<div class=”col-md-8 py-5″>
lalu
<div class=”col-md-4 py-5″>
footer class=”container bg-primary text-white”>
<div class=”row”>
<div class=”col-12 py-4″>© 2021 Tutorial Bootstrap</div>
Atau untuk kode lengkapnya kamu dapat mengikuti seperti dibawah ini:
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Contoh Layout 1 Kolom</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″ crossorigin=”anonymous” />
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anonymous”></script>
</head>
<body>
<header class=”container bg-primary text-white”>
<div class=”row”>
<div class=”col-12 py-4 text-center”>
<h1 class=”display-1″>Tutorial Bootstrap</h1>
<p class=”lead”>Panduan Belajar Bootstrap untuk Pemula</p>
</div>
</div>
</header>
<main class=”container border”>
<div class=”row”>
<div class=”col-md-8 py-5″>
<h1>Membuat Layout Satu Kolom</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad reprehenderit libero unde ullam ducimus sunt, saepe fugit animi accusamus accusantium excepturi corrupti aut tenetur? Cumque quasi ratione ipsam facere quod?</p>
</div>
<div class=”col-md-4 py-5″>
<img class=”w-100″ src=”https://placeimg.com/250/250/nature” alt=”gambar alam” />
</div>
</div>
</main>
<footer class=”container bg-primary text-white”>
<div class=”row”>
<div class=”col-12 py-4″>© 2021 Tutorial Bootstrap</div>
</div>
</footer>
</body>
</html>
Maka hasilnya adalah
Baiklah, kira-kira itu saja yang untuk artikel kali ini, lebih dan kurang saya mohon maaf jika ada yang masih kurang lengkap
sampai jumpa di artikel selanjutnya…