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 Menggunakan Template Admin LTE Sebagai Template Web Dinamis

-
Image
Kali ini saya akan membuat tutorial bagaimana menggunakan template gratis sebagai template web dinamis. Pertama anda download terlebih dulu templatenya disini . Pada tutorial ini saya menggunakan template admin LTE 2. Pada template ini saya memecah bagian index.php dan menyatukan kembali dengan include, tujuannya agar template terbagi-bagi dan mudah dipahami. Selain itu, pembagian ini lah yang membuat web menjadi dinamis. Perlu diingat cara saya ini bukanlah cara satu-satu nya Cara Menggunakan template Admin LTE Sebagai Template Web Dinamis . Cara ini saya sharing karena menurut saya adalah cara yang cukup efisien dan mampu menangani semua halaman yang akan kita buat. Bagian terpenting nya adalah mampu menghasilkan program sesuai yang kita harapkan dengan cara yang lebih mudah dibuat. Pertama kita buat folder di htdocs template kemudian ekstrak file zip nya di folder tersebut. Selanjutnya buka folder template dan rename file index.html menjadi index.php  . Buka file
Read more

Aplikasi CRUD menggunakan Template Admin LTE

-
Image
Pada tutorial yang lalu saya sudah menulis  Membuat CRUD dengan PHP Mysqli  anda dapat mempelajari dulu jika belum pernah membuat aplikasi CRUD. Kita membuat aplikasi crud dengan template tujuannya agar tampil lebih baik dan responsif. Jika anda ingin membuat template sendiri juga bisa. Baca juga Membuat Template Sederhana Dengan HTML dan CSS Sebelum membuat aplikasi crud di template Admin LTE anda perlu menyiapkan templatenya dulu. Baca Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis . Sekarang saya anggap anda sudah memiliki template nya. Berikut ini list yang akan kita kerjakan.  Template  Buat Databse  Read Data  Create Data  Delete Data  Update Data Sampai disini kita anggap template sudah ada, selanjutnya kita buat database dengan nama db_siswa . Gambar membuat database Pertama start apache dan mysql di xampp (
Read more

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

-
Image
Link adalah bagian dari HTML yang fungsinya untuk menghubungkan satu halaman dengan halaman lain. Link juga bisa diartikan sebagai cara berpindah dari satu halaman ke halaman lain. 1. Link ke Halaman Lain Tag yang digunakan untuk membuat link adalah tag anchor atau tag <a> , yang berpasangan dengan </a> . Link biasanya menggunakan objek untuk di klik yang di letakkan diatara tag buka dan tag tutup. Teks Tombol (Button) Gambar Ketiga objek di atas sering dijadikan link, dan tidak ada kategori yang paling sering digunakan. Mimilih teks, tombol, atau gambar sebagai link sangat opsional atau tidak ada keharusan. Format link <a href="url" name="nama_link"> Objek Link </a> 1.1. Contoh Link Dengan Objek Teks <!--nama file link.html--> Untuk ke halaman selanjutnya <a href="link2.html">Klik disini</a> Teks klik disini jika di klik halaman akan berpindah ke link2.html. Pada conto
Read more