Pada kesempatan kali ini saya ingin berbagi bagaimana cara membuat deskripsi dengan rapi menggunakan bootstrap, disini saya akan menggunakan boostrap 4 ya teman-teman, oke kembali lagi dengan deskripsi, deskripsi memang hal yang simple dulu semenjak sebelum ada bootstrap saya menggunakan table untuk membuat deskripsi dengan rapi, bahkan konten-konten saya membuatnya dengan table, tapi karena sekarang table termasuk tag yang sudah usang, atau alangkah baiknya tidak di gunakan lagi, dan harus di tinggalkan, apalagi sekarang ada boostrap lebih di permudahkan, oke bagaimana caranya sangat mudah kok teman-teman simak terus ya.
Untuk belajar cara membuat deskripsi dengan rapi menggunakan bootstrap, disini saya menggunakan boostrap dengan versi terbaru yaitu 4 ya, apakah teman-teman sudah bisa menggunakannya, saya harap disini teman-teman sudah bisa ya, caranya sama seperti kita menggunakan boostrap versi 3.7, supaya kita langsung masuk contoh pembuatannya. Disini kita akan membuat seperti contoh boostrap ini:
Seperti gambar di atas ya teman-teman, nanti tulisan saya langsung ambil saja di boostrapnya biar sama, seperti yang teman-teman lihat dari judul dan deskripsinya akan terlihat rapi dengan bantun grid pada boostrap, tag dl, dt, dd, kita akan bisa membuat seperti gambar di atas, seperti halnya kita membuat list, seperti dl di ibaratkan seperti ul, yang kalau saya bilang seperti pengurungnnya, dt sebagai judul dan dd sebagai deskripsinya, oke supaya teman-teman tidak tambah bingung perhatikan struktrur berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<h1>cara membuat deskripsi dengan rapi menggunakan bootstrap</h1>
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<-e-script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"><-e-/script>
<-e-script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"><-e-/script>
<-e-script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"><-e-/script>
</body>
</html>
Jika teman-teman sebelumnya sudah pernah menggunakan boostrap pasti sudah tidak bingung lagi ya dengan struktur di atas, teman-teman perhatikan saja tag dl, dt, dd, hasilnya akan sama seperti gambar di atas ya teman-teman:
Oke saya rasa cukup sampai disini dulu belajar kita tentang cara membuat deskripsi dengan rapi menggunakan bootstrap, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.