Pada pembelajaran Bootstrap 4 ini kita akan melanjutkan dengan variasi display image. Variasi display image yang akan kita bahas saat ini adalah menampilkan image pada viewport sm ke atas. Jadi image akan tampil pada viewport sm (small) ke atas. Kita akan menggunakan class d-none yang berarti display none dan d-sm-block yang berarti display pada small adalah block.
Source codenya dalah seperti berikut 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”>
Variasi Display
<div class=”row alert alert-light”>
<div class=”col-sm-3″><img src=”./img/gbr1.jpg” class=”img-fluid d-none d-sm-block”></div>
<div class=”col-sm-3″><img src=”./img/gbr2.jpg” class=”img-fluid d-none d-sm-block”></div>
<div class=”col-sm-3″><img src=”./img/gbr3.jpg” class=”img-fluid d-none d-sm-block”></div>
<div class=”col-sm-3″><img src=”./img/gbr4.jpg” class=”img-fluid d-none d-sm-block”></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 diakses di https://bs4.aris.proweb.asia/img03.html dengan tampilan
- Pada layar sm (small):
Jadi pada tampilan small, medium, large dan extra large maka image akan ditampilkan.
- Pada layar xs (extra small):
Terlihat bahwa pada layar extra small tidak muncul image.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.