Lembar Contekan Bootstrap
Referensi Bootstrap 5.3 yang dapat dicari dan dicetak — grid, spacing, tipografi, warna, utilitas flex, tombol, form, dan komponen. Gratis.
Grid & tata letak
12<div class="container">
Kontainer responsif lebar tetap
<div class="container-fluid">
Kontainer lebar penuh di setiap breakpoint
<div class="container-md">
Lebar 100% hingga breakpoint md
<div class="row">
Baris grid, menampung kolom
<div class="col">
Kolom otomatis lebar sama
<div class="col-6">
Membentang 6 dari 12 kolom
<div class="col-md-4">
4 kolom dari breakpoint md ke atas
<div class="col-auto">
Kolom seukuran kontennya
<div class="offset-md-2">
Geser kolom 2 kolom ke kanan
<div class="row g-3">
Jarak gutter antar kolom
<div class="row row-cols-3">
Paksa 3 kolom sama per baris
<div class="order-2">
Atur ulang kolom flex/grid
Utilitas jarak
12m-3
Margin di semua sisi (skala 0-5)
mt-2
Margin atas
mx-auto
Margin horizontal otomatis untuk memusatkan
p-4
Padding di semua sisi
py-2
Padding vertikal (atas dan bawah)
ms-3
Margin awal (kiri di LTR, sadar RTL)
me-3
Margin akhir (kanan di LTR, sadar RTL)
ps-2
Padding awal, sadar RTL
pe-2
Padding akhir, sadar RTL
gap-3
Jarak antar item flex/grid
m-n1
Margin negatif
p-md-5
Padding responsif dari md ke atas
Tipografi
14<h1>..<h6>
Level heading dengan gaya default
<p class="display-1">
Heading display besar (display-1..6)
<p class="lead">
Paragraf lead yang menonjol
fw-bold
Berat font tebal
fw-semibold
Berat font semibold
fst-italic
Gaya font miring
text-center
Ratakan teks ke tengah
text-start
Ratakan teks ke awal, sadar RTL
text-end
Ratakan teks ke akhir, sadar RTL
text-truncate
Pangkas luapan dengan elipsis
text-uppercase
Ubah teks ke huruf kapital
fs-1
Ukuran font responsif (fs-1..6)
lh-base
Tinggi baris dasar (lh-1, lh-sm, lh-lg)
font-monospace
Keluarga font monospace
Warna & latar belakang
10text-primary
Warna teks primer
bg-primary
Warna latar belakang primer
bg-primary-subtle
Rona latar belakang primer halus
text-primary-emphasis
Teks primer beraksen, sadar tema
text-bg-primary
Latar primer dengan teks kontras otomatis
link-primary
Helper tautan berwarna
bg-opacity-50
Terapkan opasitas latar belakang 50%
text-body-secondary
Teks body sekunder redup
text-body-emphasis
Teks body beraksen tinggi
border-primary-subtle
Warna batas primer halus
Utilitas flex
10d-flex
Membuat kontainer flex
flex-row
Tata item dalam satu baris
flex-column
Tata item dalam satu kolom
justify-content-between
Beri jarak item sepanjang sumbu utama
align-items-center
Pusatkan item pada sumbu silang
flex-wrap
Mengizinkan item membungkus
flex-grow-1
Biarkan item tumbuh mengisi ruang
flex-fill
Paksa lebar fleksibel yang sama
align-self-end
Ratakan satu item ke akhir
flex-md-row
Arah flex responsif dari md
Display & posisi
12d-none
Sembunyikan elemen
d-md-block
Tampilkan sebagai block dari breakpoint md
position-relative
Pemosisian relatif
position-absolute
Pemosisian absolut
position-fixed
Pemosisian tetap
position-sticky
Pemosisian sticky
top-0 start-0
Sematkan ke kiri-atas, sadar RTL
translate-middle
Pusatkan via transform translate
fixed-top
Tetapkan elemen di atas viewport
sticky-top
Tempel di atas saat scroll
z-3
Atur z-index (z-0..3)
invisible
Sembunyikan tetapi pertahankan ruang tata letak
Ukuran & batas
12w-100
Lebar 100% dari induk
w-50
Lebar 50% dari induk
h-100
Tinggi 100% dari induk
mw-100
Lebar maksimum 100%
vh-100
Tinggi 100% dari viewport
border
Tambahkan batas default di semua sisi
border-0
Hapus semua batas
border-primary
Warnai batas
rounded
Border-radius default
rounded-pill
Bentuk pil membulat penuh
rounded-circle
Border-radius melingkar
shadow-sm
Bayangan kotak kecil (shadow, shadow-lg)
Tombol
9<button class="btn btn-primary">
Tombol primer solid
<button class="btn btn-outline-primary">
Varian tombol outline
<button class="btn btn-lg">
Tombol besar (juga btn-sm)
<button class="btn btn-link">
Tombol bergaya seperti tautan
<button class="btn-close">
Tombol tutup generik (×)
<button class="btn disabled">
Status tombol nonaktif
<button class="btn active">
Status tombol aktif
<div class="d-grid"><button class="btn">
Tombol block lebar penuh via d-grid
<div class="btn-group">
Kelompokkan tombol bersama
Formulir
11<input class="form-control">
Input teks bergaya
<label class="form-label">
Label field formulir
<select class="form-select">
Dropdown select bergaya
<div class="form-check">
Pembungkus checkbox/radio
<input class="form-check-input">
Input checkbox atau radio bergaya
<div class="form-check form-switch">
Komponen sakelar toggle
<input class="form-control-lg">
Input besar (juga form-control-sm)
<div class="input-group">
Kelompokkan input dengan add-on
is-invalid
Status validasi tidak valid (is-valid)
<div class="form-floating">
Input dengan label mengambang
col-form-label
Label disejajarkan untuk formulir horizontal
Komponen
14<div class="card">
Kartu konten fleksibel
<nav class="navbar navbar-expand-lg">
Bilah navigasi responsif
data-bs-toggle="modal" data-bs-target="#m"
Picu dialog modal
data-bs-toggle="dropdown"
Alihkan menu dropdown
data-bs-toggle="collapse"
Alihkan elemen yang dapat diciutkan
<div class="accordion">
Panel ciutkan bertumpuk
<div class="alert alert-dismissible">
Pesan peringatan yang dapat ditutup
<span class="badge text-bg-primary">
Badge hitungan atau label kecil
<ul class="list-group">
Daftar item bergaya
<ul class="nav nav-tabs">
Navigasi bertab
<div class="toast">
Notifikasi toast ringan
<div class="offcanvas">
Panel sidebar off-canvas
<div class="spinner-border">
Indikator spinner pemuatan
<nav><ul class="pagination">
Tautan navigasi berpaginasi
Helper & lain-lain
11data-bs-theme="dark"
Aktifkan mode warna gelap pada suatu scope
<div class="ratio ratio-16x9">
Kotak rasio aspek responsif
visually-hidden
Sembunyikan secara visual, pertahankan untuk pembaca layar
visually-hidden-focusable
Tersembunyi hingga difokuskan (tautan lewati)
stretched-link
Buat induk dapat diklik sepenuhnya
clearfix
Bersihkan anak yang di-float
<div class="vstack gap-2">
Tumpukan elemen vertikal
<div class="hstack gap-2">
Tumpukan elemen horizontal
<a class="icon-link">
Tautan disejajarkan dengan ikon inline
<div class="progress">
Kontainer bilah progres
<nav class="breadcrumb">
Jejak navigasi breadcrumb
Tidak ada entri yang cocok dengan “:q”.
Butuh bantuan?
Menemukan masalah dengan alat ini? Beri tahu tim kami.