Setelah mempelajari beberapa tutorial dan tips Bootstrap di postingan-postingan sebelumnya dalam kategori Bootstrap, saat ini dapat kita kumpulkan nama-nama class Bootstrap yang tersedia dan pernah kita gunakan pada pos-pos sebelumnya agar tidak lupa atau untuk mengingatnya kembali.
Kumpulan Lengkap Nama class Bootstrap
[bs_smart_list_pack_start][/bs_smart_list_pack_start]
class active (.active) berfungsi untuk banyak hal, diantaranya:
- Membuat row atau cell pada table menjadi aktif dan menjadikan backgroundnya berwarna abu-abu, warna yang sama saat hover. Lihat: cara membuat table Bootstrap.
- Membuat link paginasi menjadi aktif dan memberikan warna background berwarna biru (untuk menyorot halaman saat ini). Lihat: cara membuat pagination Bootstrap.
- Membuat item menu menjadi aktif dan memberikan warna background biru pada item menu di dropdown menu.
- Membuat link menjadi aktif dan memberikan warna abu-abu pada default navbar, memberikan warna putih dan background hitam pada inverted navbar. Lihat: cara membuat navbar Bootstrap.
- Membuat animasi pada progress bar, lihat : cara membuat progress bar Bootstrap.
- Memberikan warna background biru pada list item dan menjadikannya sebagai aktif pada list group, lihat : cara membuat list inline di Bootstrap.
- Memberikan warna background biru pada tombol seolah telah / sedang diklik, lihat : cara membuat tombol di Bootstrap.
class affix (.affix) berfungsi untuk:
- Membuat sebuah elemen menjadi terkunci/sticky pada suat halaman, .affix merupakan toggle fixed on/off. Lihat: cara membuat sticky navbar dan mengecil ketika scroll.
alert classes berfungsi untuk:
- .alert digunakan untuk membuat kotak pesan peringatan / pemberitahuan.
- .alert-dismissable digunakan untuk membuat alert yang tidak dapat ditutup dengan overlay click, perlu menggunakan .close agar alert dapat ditutup.
- .alert-danger, .alert-info, .alert-warning, .alert-success, .alert-link, dan .alert-info merupakan contextual classes untuk .alert. Lihat: cara membuat alert di Bootstrap.
class badge (.badge) berfungsi untuk:
- .badge digunakan untuk membuat badge circle menyerupai bubble berwarna abu-abu dan biasa digunakan untuk menampilkan angka. Lihat: cara membuat badges Bootstrap.
Background classes berfungsi untuk:
- .bg-danger digunakan untuk memberikan background warna merah pada elemen, merepresentasikan bahaya atau error.
- .bg-warning digunakan untuk memberikan background warna oranye pada elemen, merepresentasikan peringatan.
- .bg-success digunakan untuk memberikan background warna hijau pada elemen, merepresentasikan berhasil atau sukses.
- .bg-primary digunakan untuk memberikan background warna biru pada elemen, merepresentasikan default atau utama.
- .bg-info digunakan untuk memberikan background warna biru muda pada elemen, merepresentasikan notifikasi atau informasi. Lihat: cara berikan warna background di Bootstrap.
class breadcrumb (.breadcrumb) berfungsi untuk:
- Menampilkan halaman saat ini yang sedang dibuka dengan tampilan hirarki, lihat: cara membuat breadcrumb di Bootstrap.
Button classes berfungsi untuk:
- .btn digunakan untuk membuat tombol basic, berwarna abu-abu dan rounded corner.
- .btn-block digunakan untuk membuat tombol basic yang lebarnya menghabiskan semua lebar parent (full width).
- .btn-group digunakan untuk membuat sekelompok tombol dalam satu barisan.
- .btn-group-justified digunakan untuk membuat sekelompok tombol memiliki lebar yang full.
- .btn-group-xs, .btn-group-sm, dan .btn-group-lg merupakan size untuk sekelompok tombol.
- .btn-group-vertical digunakan untuk membuat sekelompok tombol berdiri tegak vertikal.
- .btn-default, .btn-info, .btn-danger, .btn-warning, .btn-info, dan .btn-link merupakan contextual classes untuk tombol.
- .btn-lg, .btn-sm, dan .btn-xs merupakan ukuran (size) untuk tombol Bootstrap. Lihat: cara membuat tombol Bootstrap.
carousel classes berfungsi untuk:
- .carousel digunakan untuk membuat carousel (slideshow).
- .carousel-caption digunakan untuk membuat caption (catatan) untuk setiap slideshow di carousel tersebut.
- .carousel-control digunakan untuk membuat container untuk link Next dan Previous.
- .carousel-indicators digunakan untuk menampilkan titik kecil (indikator) di bawah slide carousel yang mengindikasi berapa jumlah slide pada carousel tersebut.
- .carousel-inner digunakan untuk membuat container untuk masing-masing slide. Lihat: cara membuat carousel di Bootstrap.
class center-block (.center-block) berfungsi untuk:
- .center-block digunakan untuk memusatkan elemen ke tengan (menjadikannya display:block; dengan margin kana kiri auto).
Checkbox classes berfungsi untuk:
- .checkbox digunakan untuk membuat container Checkbox.
- .checkbox-inline digunakan untuk membuat beberapa Checkbox tampil dalam satu baris yang sama. Lihat: cara membuat checkbox di Bootstrap.
class clearfix (.clearfix) berfungsi untuk:
- .clearfix digunakan untuk menghilangkan floats, lihat: cara membuat website menggunakan Bootstrap.
class close (.close) berfungsi untuk:
- Menampilkan ikon close (tanda silang, x), misalnya untuk menutup modal popup.
col classes berfungsi untuk:
- .col-*-* digunakan untuk membuat responsive grid.
- .col-*-offset-* digunakan untuk memindahkan kolom ke sisi kanan, memberikan jarak antar kolom menggunakan * kolom.
- .col-*-push-* digunakan untuk mengganti susunan grid.
- .col-*-pull-* digunakan untuk mengganti susunan grid. Lihat: perbedaan Bootstrap 3 dan 4.
collapse classes berfungsi untuk:
- .collapse digunakan untuk membuat konten yang dapat disembunyikan / ditampilkan ketika di klik, defaultnya disembunyikan (hidden).
- .collapse in digunakan untuk membuat konten yang dapat disembunyikan / ditampilkan ketika di klik, defaultnya ditampilkan (shown). Lihat : cara membuat collapse Bootstrap.
container classes berfungsi untuk:
- .container digunakan untuk membuat container (bungkusan) dengan margin sisi kiri dan kanan yang sama.
- .container-fluid digunakan untuk membuat container (pembungkus) dengan lebar penuh selayar.
disabled class (states) berfungsi untuk:
.disabled dapat digunakan untuk beberapa hal. diantaranya:
- Membuat list pada item list group tidak dapat diklik dan memberikan warna background abu-abu.
- Membuat tombol tidak dapat diklik dan menampilkan tanda merah ketika di hover.
- Meniadakan tombol paginasi sehingga tidak dapat diklik dan membuatnya berwarna abuabu (buram), akan menampilkan ikon merah ketika dihover.
- Membuat item di dalam dropdown menjadi pudar dan tidak dapat diklik.
dropdown classes berfungsi untuk:
- .dropdown digunakan untuk membuat tombol menu yang didalamnya dapat disisipkan item.
- .dropdown-menu digunakan untuk menambahkan style untuk container dropdown menu.
- .dropdown-menu-right digunakan untuk membuat dropdown menu rata kanan.
embed-responsive classes berfungsi untuk:
- .embed-responsive digunakan untuk menyematkan konten, skalanya akan menyesuaikan di seluruh perangkat.
- .embed-responsive-item digunakan di dalam .embed-responsive untuk membuat video di dalamnya berskala tepat sesuai induknya (parent).
- .embed-responsive-4by3 digunakan untuk menyematkan konten dengan aspect raiot 4:3.
- .embed-responsive-16by9 digunakan untuk menyematkan konten dengan aspect ratio 16:9. Lihat: cara embed file responsive.
form classes berfungsi untuk:
- .form-control digunakan pada textarea, input, dan select untuk membuatnya responsive.
- .form-group digunakan sebagai container label dan input / elemen form.
- .form-horizontal digunakan untuk membuat elemen form dalam tata letak horizontal.
- .form-inline digunakan untuk membuat elemen-elemen form dalam satu barisan yang sama sehingga rata ke kanan (left-align), setidaknya harus memiliki lebar layar 768px.
- .form-control-static digunakan untuk menambahkan text di sebelah label pada form horizontal. Lihat: cara membuat form di Bootstrap.
label classes berfungsi untuk:
- .label digunakan untuk membuat kotak kecil sebagai informasi tambahan pada elemen bersangkutan, ini seperti help text.
- .label-warning, .label-success, .label-info, dan .label-danger merupakan textual classes label untuk memberikan warna latar pada label. Cara pembuatannya tidak berbeda jauh dengan Badges di atas.
class mark (.mark) berfungsi untuk:
- .mark digunakan untuk membuat highlighted text (tulisan yang disoroti) sehingga memunculkan warna latar belakang, ini mirip seperti stabilo. Lihat: cara membuat highlighted text di Bootstrap.
media classes berfungsi untuk:
- .media digunakan untuk penjajaran media seperti gambar / video, biasanya digunakan pada kolom komentar.
- .media-object mengindikasikan bahwa itu adalah gambar / video.
- .media-body digunakan untuk menampilkan konten / isi dari .media (biasanya berupa tulisan) yang nantinya akan tmapil disebelah media.
- .media-heading digunakan untuk membuat judul / heading pada .media.
- .media-list digunakan untuk nested media list (seperti sistem kolom komentar yang membalas komentar). Lihat: cara membuat media object sebagai kolom komentar.
modal classes berfungsi untuk:
- .modal digunakan untuk membuat popup.
- .modal-dialog digunakan untuk mengatur lebar dan margin dari konten popup.
- .modal-header digunakan untuk membuat header pada popup, biasanya berisi tombol close dan judul.
- .modal-body digunakan untuk membuat bagian konten / isi dari popup tersebut.
- .modal-footer digunakan untuk membuat bagian bawah dari popup, biasanya digunakan untuk menampilkan tombol.
- .modal-content merupakan pembungkus dari header, body, dan footer, ini akan memberikan style default pada popup.
- .modal-open digunakan untuk menghindari scroll ketika popup muncul (overflow: hidden;).
- .modal-sm dan .modal-lg merupakan modal size untuk menentukan ukuran modal, sedang atau besar. Lihat: cara membuat modal popup Bootstrap responsive.
nav classes berfungsi untuk:
- .navbar digunakan untuk membuat navigation bar.
- .navbar-brand digunakan untuk menyisipkan link di ujung navigation bar yang biasanya digunakan untuk menampilkan logo situs.
- .nav .nav-pills digunakan untuk membuat navigasi pill.
- .nav .nav-tabs digunakan untuk membuat menu manvigasi untuk tab. Lihat: cara membuat tab dan pill Bootstrap.
- .navbar-btn digunakan untuk menampilkan tombol di dalam navigation.
- .navbar-default digunakan untuk membuat default navigation, berwarna abu-abu.
- .navbar-inverse digunakan untuk membuat navigation berwarna hitam
- .navbar-fixed-top digunakan untuk membuat navigation diam dan tampil di atas meskipun di scroll ke bawah.
- .navbar-fixed-bottom digunakan untuk membuat navigation diam dan tampil di bawah meskipun di scroll ke atas.
- .navbar-toggle digunakan untuk menampilkan toggle burger menu, ini berfungsi pada layar berukuran kecil misalnya smartphone.
class pager berfungsi untuk:
- .pager digunakan untuk membuat tombol Next dan Previous, gunakan ini dalam elemen <ul>. Lihat: cara membuat pager Bootstrap.
panel classes berfungsi untuk:
- .panel digunakan untuk garis border pada kotak dengan padding.
- .panel-collapse digunakan untuk toggle panel, bisa ditampilkan dan disembunyikan.
- .panel-group digunakan untuk membuat beberapa panel sekaligus, ini akan menghilangkan arak bawah antar panel.
- .panel-heading digunakan untuk membuat header dalam panel.
- .panel-title digunakan untuk menampilkan judul panel, ini dieltakkan dalam .panel-heading.
- .panel-body digunakan untuk membuat bungkusan konten . isi dari panel tersebut.
- .panel-footer digunakan untuk membuat footer panel, memiliki warna yang berbeda.
- .panel-success, .panel-info, dan .panel-warning merupakan contextual classes untuk panel, memberikan warna pada panel dengan cepat. Lihat: cara membuat panel Bootstrap.
class popover berfungsi untuk:
- .popover digunakan untuk menampilkan konten dalam kotak popup yang akan tampil ketika mengkliknya, ini biasanya digunakan seperti ikon lonceng pemberitahuan di media sosial. Lihat: bagaimana cara membuat popover di Bootstrap.
progress bar classes berfungsi untuk:
- .progress digunakan sebagai container sebuah progress bar.
- .progress-bar digunakan untuk membuat progress bar.
- .progress-bar-striped digunakan untuk membuat progress bar dengan desain bergaris-garis.
- .progress-bar-warning, .progress-bar-info, .progress-bar-danger, dan .progress-bar-success merupakan contextual classes untuk progress bar yang mampu memberikan warna pada perogress bar dengan cepat. Lihat: cara membuat progress bar Bootstrap.
table classes berfungsi untuk:
- .table digunakan untuk membuat table dan menambahkan style basic table Bootsrap.
- .table-bordered digunakan untuk menambahkan garis border disetiap sisi row dan cell table.
- .table-responsive digunakan untuk membuat table menjadi responsive.
- .table-hover digunakan untuk membuat warna row menjadi abu-abi ketika dihover
- .table-condensed digunakan untuk membuat table lebih compact dengan menghilangkan padding pada cell.
text classes berfungsi untuk:
- .text-center digunakan untuk membuat tulisan berjajar tengah
- .text-capitalize digunakan untuk huruf kapital.
- .text-justify digunakan untuk membuat tulisan justify, rata kiri dan kanan.
- .text-lowercase digunakan untuk membuat tulisan huruf kecil semua. Lihat: cara membuat tulisan otomatis menjadi huruf kecil semua.
- .text-uppercase digunakan untuk membuat tulisan menjadi huruf besar semua. Lihat: cara membuat tulisan huruf besar semua.
class thumbnail (.thumbnail) berfungsi untuk:
- .thumbnail digunakan untuk menambahkan border di sisi elemen, biasanya gambar atau video yang lebih sering digunakan sebagai thumbnail.
[bs_smart_list_pack_end][/bs_smart_list_pack_end]
Baca Juga:
Itulah nama-nama class Bootstrap yang harus diketahui, setidaknya pernah tau dan kalo bisa jangan sampai lupa. Karena nama-nama class ini akan lebih sering digunakan dalam praktiknya. Jangan lupa boorkmark halaman ini untuk memantau update-nya !