Lewati ke konten utama
pelatihan
.org
Belajar. Praktik. Berkembang.
Kategori
ID
Masuk
Daftar
Menu
Kurikulum Bootstrap: 5 Bab, 54 Lesson — pelatihan.org
Beranda
/
Katalog
/
Bootstrap
/
Kurikulum
Kurikulum
Kurikulum Bootstrap
Belajar Bootstrap online lewat 54 lesson terstruktur, contoh kode, dan 270 soal kuis.
54 lesson
5 bab
270 soal
Ringkasan dan poin kunci bisa dilihat gratis. Materi lengkap, contoh kode, dan kuis memerlukan langganan.
01
Bootstrap 5 Tutorial
32 lesson
01
BS5 HOME
Bootstrap 5 adalah framework CSS front-end gratis dan open-source untuk membangun antarmuka web yang responsif dan modern dengan cepat. Framework ini menyediakan kumpulan class…
02
BS5 Get Started
Ada dua cara utama memakai Bootstrap 5: memuatnya lewat CDN atau mengunduh file-nya dan menyimpan secara lokal. Untuk proyek sederhana, CDN paling cepat karena cukup menambahkan…
03
BS5 Containers
Container adalah elemen pembungkus utama Bootstrap yang menyediakan padding dan memusatkan konten sesuai breakpoint tertentu. Ada tiga jenis: .container dengan lebar tetap per…
04
BS5 Grid Basic
Bootstrap memakai sistem grid 12 kolom yang fleksibel dengan kombinasi .row dan .col. Setiap baris menjadi wadah kolom-kolomnya, sedangkan lebar kolom ditentukan jumlah kolom…
05
BS5 Typography
Bootstrap menyediakan gaya tipografi bawaan untuk heading h1 sampai h6, paragraf, dan teks lead yang lebih besar dengan warna lebih redup. Kelas utilitas seperti .display-1…
06
BS5 Colors
Bootstrap menyediakan kelas utilitas warna seperti .text-primary, .text-success, dan .bg-danger yang dapat dipakai untuk teks, latar, maupun komponen. Warna utamanya mencakup…
07
BS5 Tables
Kelas .table memberi gaya dasar tabel Bootstrap seperti padding sel, pembatas baris, dan tipografi yang rapi. Variannya seperti .table-striped, .table-bordered, .table-hover, dan…
08
BS5 Images
Bootstrap membuat gambar responsif dengan .img-fluid yang menerapkan max-width 100 persen dan tinggi otomatis agar gambar tidak meluber. Kelas seperti .rounded dan…
09
BS5 Jumbotron
Jumbotron, yaitu kotak besar berlatar abu-abu untuk menampilkan hero section, sudah dihapus dari Bootstrap 5. Penggantinya adalah memakai utilitas bawaan seperti .p-5,…
10
BS5 Alerts
Alert adalah kotak pesan bawaan Bootstrap untuk menampilkan informasi singkat kepada pengguna. Class dasarnya .alert dipadukan dengan warna tema seperti .alert-success atau…
11
BS5 Buttons
Bootstrap mempercantik tombol lewat kelas .btn dipadukan warna seperti .btn-primary atau .btn-outline-secondary. Ukuran tombol diatur dengan .btn-lg dan .btn-sm, sedangkan untuk…
12
BS5 Button Groups
.btn-group menggabungkan beberapa tombol dalam satu baris rapat tanpa jarak di antaranya, biasanya dipakai untuk toolbar aksi atau pilihan alternatif. Bedakan dengan .btn-toolbar…
13
BS5 Badges
Badge adalah label kecil yang menampilkan angka atau kategori seperti jumlah notifikasi pada menu. Class dasarnya .badge dipadukan warna tema seperti .bg-primary atau…
14
BS5 Progress Bars
Progress bar menampilkan progres penyelesaian tugas dalam bentuk bar horizontal berwarna. Elemen .progress menjadi wadah sedangkan .progress-bar di dalamnya menentukan lebar…
15
BS5 Spinners
Spinner adalah indikator loading berputar yang tersedia dalam dua gaya: .spinner-border berbentuk cincin dan .spinner-grow berbentuk mengembang. Ukurannya diatur dengan varian…
16
BS5 Pagination
Pagination menampilkan deretan nomor halaman agar pengguna bisa berpindah konten bertahap. Struktur Bootstrap memakai <ul class="pagination"> berisi <li class="page-item"> dengan…
17
BS5 List Groups
List group membuat daftar item yang rapi, bisa berupa daftar statis, daftar berisi tautan, maupun daftar berkonten kaya. Class dasarnya .list-group pada pembungkus dan…
18
BS5 Cards
Card adalah kotak konten serbaguna untuk menampilkan gambar, judul, teks, dan tautan dalam satu bungkus bergaya konsisten. Strukturnya dimulai dari .card, lalu .card-body untuk…
19
BS5 Dropdowns
Dropdown menampilkan menu tersembunyi yang muncul saat pengguna mengklik pemicunya. Pada Bootstrap 5, dropdown dibuat dengan atribut data-bs-toggle="dropdown" pada tombol, lalu…
20
BS5 Collapse
Collapse menyembunyikan atau menampilkan blok konten secara mulus, umum dipakai untuk menu accordion atau bagian FAQ. Pemicu memakai data-bs-toggle="collapse" dan data-bs-target…
21
BS5 Navs
Navs menyusun tautan navigasi dalam satu baris, misalnya tab atau pil menu. Class dasarnya .nav dengan .nav-item dan .nav-link, sedangkan tampilan tab atau pil ditentukan…
22
BS5 Navbar
Navbar adalah bilah navigasi responsif yang bisa berisi merek, tautan, dropdown, dan formulir pencarian. Class dasarnya .navbar dengan .navbar-expand-lg agar menu lurus di layar…
23
BS5 Carousel
Carousel atau slider menampilkan beberapa slide yang bergantian, bisa otomatis maupun digeser manual. Elemen utamanya .carousel dengan .carousel-inner berisi .carousel-item, lalu…
24
BS5 Modal
Modal adalah dialog overlay yang menampilkan informasi atau formulir di atas halaman. Modal Bootstrap 5 terdiri dari .modal yang berisi .modal-dialog dan .modal-content, dengan…
25
BS5 Tooltip
Tooltip adalah kotak kecil berisi teks yang muncul saat pengguna menyapu elemen dengan kursor. Aktifkan dengan data-bs-toggle="tooltip", tentukan posisi lewat data-bs-placement,…
26
BS5 Popover
Popover mirip tooltip tetapi bisa berisi judul dan tubuh teks lebih panjang, serta biasanya muncul saat diklik. Aktifkan dengan data-bs-toggle="popover", lalu isi lewat…
27
BS5 Toast
Toast adalah notifikasi kecil yang muncul di sudut layar untuk memberi umpan balik singkat, biasanya hilang otomatis setelah beberapa detik. Elemen .toast dibungkus…
28
BS5 Scrollspy
Scrollspy memantau posisi scroll halaman dan menandai tautan navigasi yang sesuai dengan bagian yang sedang terlihat, cocok untuk dokumentasi panjang. Caranya, tambahkan…
29
BS5 Offcanvas
Offcanvas adalah panel geser yang tersembunyi di luar layar dan muncul saat diminta, sering dipakai untuk menu samping di perangkat mobile. Komponen ini mirip collapse tetapi…
30
BS5 Utilities
Bootstrap 5 menyediakan kelas utilitas siap pakai untuk kebutuhan umum seperti jarak (.m-* dan .p-*), tampilan (.d-none), teks (.fw-bold), dan warna (.bg-*). Utilitas dapat…
31
BS5 Dark Mode
Bootstrap 5.3 mendukung mode gelap secara bawaan melalui atribut data-bs-theme="dark" yang ditempatkan pada <html> atau bagian tertentu halaman. Cukup tambahkan atribut itu dan…
32
BS5 Flex
Utilitas flex Bootstrap memudahkan pengaturan flexbox tanpa menulis CSS manual, seperti .d-flex untuk mengaktifkan flex container dan .justify-content-center untuk memusatkan…
02
Bootstrap 5 Forms
7 lesson
01
BS5 Forms
Form Bootstrap mempercantik kontrol input seperti teks, email, dan textarea dengan kelas .form-control. Pilihan radio dan checkbox memakai .form-check, label terhubung memakai…
02
BS5 Select Menus
<select> diberi gaya Bootstrap dengan kelas .form-select, bukan .form-control, agar tampilan panah dan tepinya khas dropdown. Ukuran diatur dengan .form-select-sm atau…
03
BS5 Checks and Radios
Checkbox dan radio dibungkus dengan class .form-check agar memiliki jarak dan penataan yang konsisten. Kelas .form-check-inline menyusun beberapa opsi dalam satu baris, sedangkan…
04
BS5 Range
Input range atau penggeser diberi gaya Bootstrap dengan kelas .form-range, menghasilkan slider dengan bulatan penunjuk yang menarik. Nilai minimum, maksimum, dan langkah diatur…
05
BS5 Input Groups
Input group menggabungkan teks atau tombol dengan input dalam satu baris rapi, misalnya awalan @ pada username atau tombol kirim di ujung kolom. Strukturnya memakai .input-group…
06
BS5 Floating Labels
Floating label membuat label terlihat melayang di atas kolom isian ketika pengguna mengisi atau fokus, menghemat ruang sekaligus tetap informatif. Caranya, bungkus <input> dan…
07
BS5 Form Validation
Validasi formulir Bootstrap bekerja dengan menambahkan atribut required pada kontrol lalu menampilkan gaya sukses atau gagal berdasarkan kelas .was-validated pada <form>.…
03
Bootstrap 5 Grid
9 lesson
01
BS5 Grid System
Grid Bootstrap terdiri dari container, row, dan kolom yang bekerja sama membentuk tata letak responsif. Container membatasi lebar maksimum, row membungkus kolom, dan kolom dibagi…
02
BS5 Stacked/Horizontal
Pada layar kecil, kolom Bootstrap secara bawaan menumpuk secara vertikal (stacked). Agar kolom berdampingan (horizontal) hanya di layar tertentu, tambahkan kelas dengan…
03
BS5 Grid XSmall
Kelas kolom tanpa awalan breakpoint seperti .col-6 berlaku untuk semua ukuran layar, termasuk layar paling kecil (extra small). Inilah dasar tata letak mobile-first: tentukan…
04
BS5 Grid Small
Breakpoint small (sm) berlaku untuk layar berlebar minimal 576 piksel, misalnya ponsel dalam orientasi lanskap. Kelas kolom small ditulis .col-sm-6 dan hanya aktif ketika lebar…
05
BS5 Grid Medium
Breakpoint medium (md) aktif mulai lebar layar 768 piksel, umumnya menandai tablet ke atas. Kelas seperti .col-md-6 membuat kolom berdampingan hanya pada ukuran tersebut,…
06
BS5 Grid Large
Breakpoint large (lg) aktif mulai 992 piksel, cocok untuk layar laptop dan desktop kecil. Kelas .col-lg-* membuat kolom berdampingan pada ukuran ini dan container-nya mencapai…
07
BS5 Grid XLarge
Breakpoint extra large (xl) aktif mulai 1200 piksel, ditujukan untuk layar desktop besar. Kelas .col-xl-* mengatur tampilan ketika lebar layar mencapai 1200px ke atas, sedangkan…
08
BS5 Grid XXL
Breakpoint xxl adalah titik terbesar pada grid Bootstrap 5, aktif mulai lebar layar 1400 piksel ke atas dengan container maksimal 1320 piksel. Kelas .col-xxl-* memberi…
09
BS5 Grid Examples
Halaman ini mengumpulkan contoh penerapan grid yang sering dipakai, misalnya dua, tiga, empat kolom, serta susunan sidebar dan konten utama. Pola-pola ini menjadi template cepat…
04
Bootstrap 5 Other
5 lesson
01
BS5 Basic Template
Template bawaan Bootstrap 5 memberi titik awal halaman yang sudah memuat struktur HTML dasar, meta viewport, dan tautan CSS serta JS. Ada starter template biasa, starter dark…
02
BS5 Editor
Bootstrap Editor (Tryit Editor) memungkinkan kamu menulis dan menjalankan kode HTML serta CSS Bootstrap langsung di peramban tanpa membuat file proyek. Perubahan kode dapat…
03
BS5 Syllabus
Syllabus (silabus) Bootstrap memetakan materi yang dipelajari secara berurutan, mulai dari dasar instalasi, tipografi, warna, bentuk, lalu komponen interaktif, hingga sistem grid…
04
BS5 Study Plan
Rencana belajar (study plan) menyusun materi Bootstrap menjadi jadwal harian agar progres terukur, misalnya satu topik per hari selama beberapa minggu. Setiap sesi sebaiknya…
05
BS5 Interview Prep
Persiapan wawancara Bootstrap berfokus pada pertanyaan konseptual seperti pengertian container, grid 12 kolom, breakpoint, serta perbedaan versi 4 dan 5. Kandidat juga sering…
05
Bootstrap 5 Ref
1 lesson
01
All Classes
Halaman referensi berisi daftar seluruh kelas Bootstrap 5 beserta fungsinya, mulai dari utilitas layout, warna, teks, spacing, hingga kelas komponen seperti .btn, .card, dan…