Setelah kita membahas responsive image pada Bootstrap 4 maka kita akan melanjutkan pada pembahasan mengenai variasi tampilan image pada Bootstrap. Dengan memiliki pengetahuan mengenai variasi tampilan pada image Bootstrap ini maka akan mempercepat kita dalam mengembangkan tampilan aplikasi web yang kita kembangkan. Dengan bahasa lain juga dengan mengetahui variasi tampilan image pada Bootstrap ini akan mencegah kita membuang-buang waktu dalam menata tampilan image berbasis Bootstrap 4 ini.
Artikel kali ini akan membahas tiga variasi tampilan image yaitu:
1. rounded
2. rounded-circle
3. thumbnail
Source codenya adalah seperti di bawah ini:
<!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”>
Responsive Image
<div class=”row alert alert-light”>
<div class=”col-sm-3″><img src=”./img/small.jpg” class=”img-fluid rounded”></div>
<div class=”col-sm-3″><img src=”./img/medium.jpg” class=”img-fluid rounded-circle”></div>
<div class=”col-sm-3″><img src=”./img/large.jpg” class=”img-thumbnail”></div>
<div class=”col-sm-3″><img src=”./img/extra-large.jpg” class=”img-fluid”></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>
Hasil di https://bs4.aris.proweb.asia/img02.html dengan tampilan:
Tampak pada image pertama ada rounded, image kedua ada rounded-circle dan image ketiga ada thumbnail.
Informasi lebih lanjut https://getbootstrap.com/docs/4.2/content/images/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.