Setelah kita memahami breakpoint pada Bootstrap 4, kita akan melanjutkan dengan merancang tampilan kolom pada perangkat mobile dan desktop.
Secara teknis untuk membuat layout mirip tabel pada Bootstrap kita menggunakan tiga class yaitu
- Class container
- Class row
- Class terkait kolom yaitu col-*
Pada class row ini kita dapat membagi menjadi maksimum 12 kolom. Tampilan pada layar laptop tidak masalah jika satu baris dibagi rata 12 kolom. Begitu juga dengan tablet tidak masalah jika dibagi 12.
Tetapi bagaimana jika layar tampilannya hanya memiliki lebar 480 px ? Maka jika dibagi 12 maka hasilnya 480:12 = 40 px. Tentu tidak bijaksana jika kita membuat kolom untuk button dengan lebar hanya 40px . Dengan demikian kita bisa berpikir bahwa untuk xs jangan membagi menjadi 12.
Sebelum kita menuju source code baiklah kita menentukan tampilan pada berbagai tampilan misalnya
- Tampilan pada xs (extra small)
Untuk tampilan pada layar xs ini kita akan menampilkan tiap baris menjadi 1 kolom saja.
Jadi 12/1 = 12.
Untuk itu class kolom yang dipakai adalah: col-xs-12
- Tampilan pada sm (small)
Untuk tampilan pada layar sm ini kita akan menampilkan 2 kolom per baris.
Jadi 12/2 = 6.
Untuk itu class untuk kolom yang dipakai adalah: col-sm-6
- Tampilan pada md (medium)
Untuk tampilan pada layar md ini kita akan menampilkan 3 kolom per baris.
Jadi 12/3 = 4.
Dengan demikian class yang akan dipakai adalah: col-md-4
- Tampilan pada lg (large) dan xl (extra large)
Untuk tampilan large dan di atasnya kita akan menampilkan 6 kolom per baris.
Jadi 12/6 = 2.
Untuk itu class yang akan dipakai adalah: col-lg-2
Source code lengkapnya adalah:
<!doctype html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<link rel=”stylesheet” href=”/bootstrap/bootstrap.min.css”>
</head>
<body>
<div class=”container alert alert-dark”>
Dark
<div class=”row alert alert-light”>
<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2 alert alert-primary”>Primary</div>
<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2 alert alert-secondary”>Secondary</div>
<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2 alert alert-success”>Success</div>
<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2 alert alert-danger”>Danger</div>
<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2 alert alert-warning”>Warning</div>
<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2 alert alert alert-info”>Info</div>
</div>
</div><script src=”/bootstrap/jquery-3.3.1.slim.min.js”></script>
<script src=”/bootstrap/popper.min.js”></script>
<script src=”/bootstrap/bootstrap.min.js”></script>
</body>
</html>
Tampilan dapat dilihat di https://bs4.aris.proweb.asia/kolom.html dengan screenchoot seperti gambar di bawah ini:
- Tampilan layar xs:
- Tampilan layar sm:
- Tampilan layar md:
- Tampilan layar lg:
- Tampilan layar xl:
Informasi lebih lanjut silahkan mengunjungi:
1. https://getbootstrap.com/docs/4.2/layout/grid/
2. https://getbootstrap.com/docs/4.2/components/alerts/
Kunjungi www.proweb.co.id untuk menambah wawasan anda.