Belajar Bootstrap (11. Badge and Label)

Belajar Bootstrap (11. Badge and Label)

Badge dan label dalam bootstrap

Selamat jumpa kembali di lanjutan tutorial bootstrap. Kali ini kita akan melanjutkan materi yaitu tentang badge dan label.

Badge adalah penomoran berapa banyak item yang terdapat dalam link yang terkait. Selain link, bisa menggunakan tag button, atau lainya sesuai kebutuhan. Sedangkan label digunakan untuk memberikan tambahan suatu informasi. Kita mulai dengan badge, ketik kode dibawah lalu lihat hasilnya .

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>belajar badge dan label</title>
</head>
<body>
	<h2>Belajar badge</h2>
	<a href="#">News <span class="badge">5</span></a>
	<a href="#">Comment <span class="badge">10</span></a>
	<button type="button" class="btn btn-warning btn-xs">Warning <span class="badge">4</span></button>
</body>
</html>

hasil

Lanjut ke label. Kita tahu label digunakan untuk memberikan informasi tambahan. Langsung saja berikut cara penulisan kodenya:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>Belajar label</title>
</head>
<body>
	<h2>Belajar label</h2>
	 	<span class="label label-default">Default Label</span>
		<span class="label label-primary">Primary Label</span>
		<span class="label label-success">Success Label</span>
		<span class="label label-info">Info Label</span>
		<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
</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 *