Cara menggunakan label bootstrap

Dengan Bootstrap kita dapat membuat sebuh label atau tanda seperti informasi tambahan, catatan penting, pesan peringatan dll.

Table of Contents Show

Cara Penerapan :
Perbedaan Badges & Labels – Bootstrap
Model form bootstrap dimana posisi label dan input form terletak dalam bentuk baris dinamakan?
Apa itu Bootstrap 5?
Apa itu Bootstrap 4?

Cara Penerapan :

Untuk penerapannya tambahkan nama class .label pada element HTML (normal elemen : <span>) dan diiringi class tambahan sebagai penentu type label, antara Lain : .label-default, .label-primary, .label-success, .label-info, .label-warning,

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>Label</code></h2>


<span class="label label-default">Label Default</span>
<span class="label label-primary">Label Primary</span>
<span class="label label-success">Label Success</span>
<span class="label label-info">Label Info</span>
<span class="label label-warning">Label Warning</span>
<span class="label label-danger">Label Danger</span>


</div>
</body>
</html>

Badges / Labels pada Bootstrap biasanya digunakan untuk menampilkan bubble pada suat tulisan, misalnya menjadi bagian dari notifikasi / pemberitahuan. Pada umumnya, notifikasi akan menampilkan jumlah notifikasi yang di dapatkan dalam bentuk bubble (seperti notifikasi Facebook).

Gambar di atas adalah contoh dari Badges Bootstrap, kamu dapat menyesuaikannya sesuai keperluan. Lalu, apa perbedaan Badges dan Labels Bootstrap ?

ads by posciety

Perbedaan Badges & Labels – Bootstrap

Tidak ada perubahan yang signifikan antara keduanya, perbedaannya hanya fungsi yang disediakan. Badges ditujukan untuk menampilkan angka, sedangkan Labels ditujukan untuk menampilkan text (biasanya digunakan untuk menampilkan informasi dari text sebelumnya).

Baca Juga:

7 Cara Mudah Membuat Situs WordPress Mobile Friendly

4 Tren UX Design di Tahun 2021

12 Plugin WordPress Gratis & Terbaik 2021 yang Wajib Kamu Miliki

Cara Mengetahui Kata-Kunci yang Dipakai oleh Pengunjung pada Fitur…

Walaupun kamu dapat bebas menggunakan text di Badges dan angka di Labels, tapi lebih disarankan untuk menggunakan sesuai fungsinya saja agar tidak berantakan ketika memasukkan dalam jumlah karakter yang banyak.

Badges

Seperti yang terlihat pada gambar di atas, itu adalah contoh dari Badges Bootstrap. Berikut ini susunan kode yang diperlukan:

<h2>Badges Bootstrap - Posciety</h2>
<a href="#">Pemberitahuan A <span class="badge">7</span></a><br>
<a href="#">Pemberitahuan B <span class="badge">3</span></a><br>
<a href="#">Pemberitahuan C <span class="badge">9</span></a>

Kodingan di atas menggunakan a href agar dapat di klik untuk menuju suatu halaman yang dimaksud, itu biasanya yang dilakukan para pengembang ketika menampilkan notifikasi. Silahkan sesuaikan dengan keperluan situs web / blog yang kamu buat !

Labels

Seperti yang dijelaskan di atas, sebaiknya gunakan Labels untuk menampilkan text / informasi dari kata sebelumnya. Contoh:

Berikut ini strukutr kode yang diperlukan untuk menampilkan Labels seperti pada gambar di atas:

<h2>Labels Bootstrap - Posciety</h2>
<p>Ini adalah contoh <span class="label label-default">Labels Bootstrap</span></p>
<p>Ini adalah contoh <span class="label label-default">Labels</span></p>

Simpan dan lihat hasilnya !

Kamu dapat menyesuaikan ukuran bubbles dari Bootstrap dengan heading, misalnya h1, h2, dst. Jika ingin menyesuaikan warna, gunakan contextual classes untuk text Bootstrap, contoh: label-success, label-default, dll.

Beberapa situs web / blog juga menampilkan bubble ini dengan menggunakan ikon, pastikan kamu memahami bagaimana cara memnampilkan ikon di Bootstrap agar mudah menerapkannya di Badges dan Labels.

Model form bootstrap dimana posisi label dan input form terletak dalam bentuk baris dinamakan?

form dengan model inline adalah sebuah form yang label dan form inputnya terletak sebaris.

Apa itu Bootstrap 5?

Tentang Kelas. Bootstrap adalah sebuah framework yang paling populer digunakan untuk membuat sebuah website. Bootstrap membuat front-end developer dapat membuat website dengan cepat, fokus pada responsive mobile, dan membuat website menjadi lebih interaktif tanpa membuat banyak CSS dan JavaScript dari nol.

Apa itu Bootstrap 4?

Apa itu Bootstrap 4? Bootstrap adalah framework CSS untuk membuat tampilan web. Bootstrap menyediakan class dan komponen yang siap dipakai, sehingga kita tidak perlu menulis kode CSS dari nol.