Membuat Grid Kolom Fleksibel

Tutorial kali ini akan membahas mengenai cara membuat posisi grid kolom fleksibel menggunakan bootstrap. Membuat grid tampil fleksibel tak ubah seperti perataan teks, namun diadopsi untuk grid. Perataan umumnya rata kiri, tengah, kanan dan justify. Sesuai dengan katanya "fleksibel" berarti tampil menyesuaikan diri dengan perangkat.

Keuntungan dari membuat tampilan fleksibel adalah mempercantik tampilan disemua resolusi perangkat yang membuka, ditandai dengan jarak grid kolom menyesuaikan otomatis. Langsung saja kita membuat kodenya.

#Fleksibel Tengah
<!DOCTYPE html>
<html>
<head>
<title>Fleksibel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row dflex justify-content-center text-light text-center">
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
</div>
</div>
</body>
</html>

Kode utamanya adalah dflex justify-content-center yang diletakkan di class row.

#Fleksibel Kiri
<!DOCTYPE html>
<html>
<head>
<title>Fleksibel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row dflex justify-content-start text-light text-center bg-info">
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
</div>
</div>
</body>
</html>
Kode utamanya adalah dflex justify-content-start yang diletakkan di class row.

#Fleksibel Kanan
<!DOCTYPE html>
<html>
<head>
<title>Fleksibel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row dflex justify-content-end text-light text-center bg-info">
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
</div>
</div>
</body>
</html>

Kode utamanya adalah dflex justify-content-end yang diletakkan di class row.

#Fleksibel Kiri-kanan
<!DOCTYPE html>
<html>
<head>
<title>Fleksibel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row dflex justify-content-between text-light text-center bg-info">
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
</div>
</div>
</body>
</html>
Kode utamanya adalah dflex justify-content-between yang diletakkan di class row.

#Fleksibel Mengelilingi
<!DOCTYPE html>
<html>
<head>
<title>Fleksibel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row dflex justify-content-around text-light text-center bg-info">
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
<div class="col-3 bg-secondary m-1" style="min-height: 50px;">
Cell
</div>
</div>
</div>
</body>
</html>
Kode utamanya adalah dflex justify-content-around yang diletakkan di class row.

Terima kasih 😀

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE