Belajar Bootstrap (4. Images)

Belajar Bootstrap (4. Images)

Selamat berjumpa kembali di pesonainformatika. Kali ini kita akan membahas tentang images pada bootstrap. Langsung saja kita praktek beberapa class yang digunakan untuk memberi efek images pada bootstrap.

Images Rounded-corner (efek pojok menjadi melingkar/tumpul/round)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar images</title>
</head>
<body>
	<div class="container">
		<h2>Rounded corner</h2>
		<img src="../img/bootstrap.png" class="img-rounded" alt="ini efek rounded-corner" width="400" height="300">
	</div>
</body>
</html>

hasil

Images Circle

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar images</title>
</head>
<body>
	<div class="container">
		<h2>Circle</h2>
		<img src="../img/bootstrap.png" class="img-circle" width="400" height="300">
	</div>
</body>
</html>

hasil

Images thumbnail (gambar terlihat ada border tambahan)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar images</title>
</head>
<body>
	<div class="container">
		<h2>Thumbnail</h2>
		<img src="../img/bootstrap.png" class="img-thumbnail" width="400" height="300">
	</div>
</body>
</html>

hasil

images responsive (membuat gambar menjadi responsive sesuai skala ukuran gambar)
*tarik browser ke ukuran kecil untuk melihat efect yang terjadi.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar images</title>
</head>
<body>
	<div class="container">
		<h2>Responsive</h2>
		<img src="../img/bootstrap.png" class="img-responsive" width="400" height="300">
	</div>
</body>
</html>

hasil

Kita akan membuat contoh galleri photo dengan 3 kolom beserta thumbnail sebagai tambahan border pada images yang kita pakai

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<title>belajar images</title>
	<style>
	p{
		text-align: center;
	}
	img {
		width: 100%;
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<p>Gambar 1</p>
				<img src="../img/bootstrap.png" class="thumbnail"></a>
			</div>
			<div class="col-md-4">
				<p>Gambar 2</p>
				<img src="../img/bootstrap.png" class="thumbnail"></a>
			</div>
			<div class="col-md-4">
				<p>Gambar 3</p>
				<img src="../img/bootstrap.png" class="thumbnail"></a>
			</div>
		</div>
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *