Bootstrap-spiekbriefje
Een doorzoekbaar, afdrukbaar Bootstrap 5.3-naslagwerk — grid, spacing, typografie, kleuren, flex-utilities, knoppen, formulieren en componenten. Gratis.
Grid & layout
12<div class="container">
Responsieve container met vaste breedte
<div class="container-fluid">
Volledige-breedte-container op elk breakpoint
<div class="container-md">
100% breed tot het md-breakpoint
<div class="row">
Grid-rij, bevat kolommen
<div class="col">
Auto-kolom met gelijke breedte
<div class="col-6">
Beslaat 6 van de 12 kolommen
<div class="col-md-4">
4 kolommen vanaf het md-breakpoint omhoog
<div class="col-auto">
Kolom op maat van zijn inhoud
<div class="offset-md-2">
Duw kolom 2 kolommen naar rechts
<div class="row g-3">
Gutter-ruimte tussen kolommen
<div class="row row-cols-3">
Forceer 3 gelijke kolommen per rij
<div class="order-2">
Herorden een flex/grid-kolom
Spacing-hulpklassen
12m-3
Marge aan alle zijden (schaal 0-5)
mt-2
Marge boven
mx-auto
Auto horizontale marges om te centreren
p-4
Padding aan alle zijden
py-2
Verticale padding (boven en onder)
ms-3
Marge start (links in LTR, RTL-bewust)
me-3
Marge einde (rechts in LTR, RTL-bewust)
ps-2
Padding start, RTL-bewust
pe-2
Padding einde, RTL-bewust
gap-3
Gap tussen flex/grid-items
m-n1
Negatieve marge
p-md-5
Responsieve padding vanaf md omhoog
Typografie
14<h1>..<h6>
Kopniveaus met standaardstijl
<p class="display-1">
Grote display-kop (display-1..6)
<p class="lead">
Opvallende lead-paragraaf
fw-bold
Vet lettergewicht
fw-semibold
Semibold lettergewicht
fst-italic
Cursieve letterstijl
text-center
Tekst centreren
text-start
Tekst op start uitlijnen, RTL-bewust
text-end
Tekst op einde uitlijnen, RTL-bewust
text-truncate
Kap overloop af met weglatingsteken
text-uppercase
Transformeer tekst naar hoofdletters
fs-1
Responsieve lettergrootte (fs-1..6)
lh-base
Basisregelhoogte (lh-1, lh-sm, lh-lg)
font-monospace
Monospace-lettertypefamilie
Kleuren & achtergrond
10text-primary
Primaire tekstkleur
bg-primary
Primaire achtergrondkleur
bg-primary-subtle
Subtiele primaire achtergrondtint
text-primary-emphasis
Nadruk primaire tekst, thema-bewust
text-bg-primary
Primaire achtergrond met auto-contrasttekst
link-primary
Gekleurde link-hulpklasse
bg-opacity-50
Pas 50% achtergrondopaciteit toe
text-body-secondary
Gedempte secundaire bodytekst
text-body-emphasis
Sterk benadrukte bodytekst
border-primary-subtle
Subtiele primaire randkleur
Flex-hulpklassen
10d-flex
Maak een flex-container
flex-row
Plaats items in een rij
flex-column
Plaats items in een kolom
justify-content-between
Verdeel items langs de hoofdas
align-items-center
Centreer items op de kruisas
flex-wrap
Sta items toe te wrappen
flex-grow-1
Laat een item groeien om ruimte te vullen
flex-fill
Forceer gelijke flexibele breedtes
align-self-end
Lijn een enkel item uit op het einde
flex-md-row
Responsieve flex-richting vanaf md
Display & positie
12d-none
Verberg het element
d-md-block
Toon als block vanaf het md-breakpoint
position-relative
Relatieve positionering
position-absolute
Absolute positionering
position-fixed
Vaste positionering
position-sticky
Sticky positionering
top-0 start-0
Vastzetten linksboven, RTL-bewust
translate-middle
Centreer via transform translate
fixed-top
Zet element vast bovenaan de viewport
sticky-top
Plak bovenaan bij scrollen
z-3
Stel z-index in (z-0..3)
invisible
Verberg maar behoud lay-outruimte
Afmetingen & randen
12w-100
Breedte 100% van parent
w-50
Breedte 50% van parent
h-100
Hoogte 100% van parent
mw-100
Max-breedte 100%
vh-100
Hoogte 100% van de viewport
border
Voeg een standaardrand toe aan alle zijden
border-0
Verwijder alle randen
border-primary
Kleur de rand
rounded
Standaard border-radius
rounded-pill
Volledig afgeronde pil-vorm
rounded-circle
Cirkelvormige border-radius
shadow-sm
Kleine box-shadow (shadow, shadow-lg)
Knoppen
9<button class="btn btn-primary">
Effen primaire knop
<button class="btn btn-outline-primary">
Outline-knopvariant
<button class="btn btn-lg">
Grote knop (ook btn-sm)
<button class="btn btn-link">
Knop met linkstijl
<button class="btn-close">
Generieke sluit-knop (×)
<button class="btn disabled">
Uitgeschakelde knopstatus
<button class="btn active">
Actieve knopstatus
<div class="d-grid"><button class="btn">
Volledige-breedte blokknop via d-grid
<div class="btn-group">
Groepeer knoppen samen
Formulieren
11<input class="form-control">
Gestileerde tekstinvoer
<label class="form-label">
Formulierveldlabel
<select class="form-select">
Gestileerde select-dropdown
<div class="form-check">
Checkbox/radio-wrapper
<input class="form-check-input">
Gestileerde checkbox- of radio-invoer
<div class="form-check form-switch">
Toggle-switch-component
<input class="form-control-lg">
Grote invoer (ook form-control-sm)
<div class="input-group">
Groepeer invoer met add-ons
is-invalid
Ongeldige validatiestatus (is-valid)
<div class="form-floating">
Floating-label-invoer
col-form-label
Label uitgelijnd voor horizontale formulieren
Componenten
14<div class="card">
Flexibele content-card
<nav class="navbar navbar-expand-lg">
Responsieve navigatiebalk
data-bs-toggle="modal" data-bs-target="#m"
Activeer een modaal dialoogvenster
data-bs-toggle="dropdown"
Schakel een dropdown-menu
data-bs-toggle="collapse"
Schakel een inklapbaar element
<div class="accordion">
Gestapelde inklapbare panelen
<div class="alert alert-dismissible">
Sluitbaar waarschuwingsbericht
<span class="badge text-bg-primary">
Kleine telling- of labelbadge
<ul class="list-group">
Gestileerde lijst van items
<ul class="nav nav-tabs">
Navigatie met tabbladen
<div class="toast">
Lichtgewicht toast-melding
<div class="offcanvas">
Off-canvas zijbalkpaneel
<div class="spinner-border">
Laad-spinner-indicator
<nav><ul class="pagination">
Gepagineerde navigatielinks
Hulpklassen & diversen
11data-bs-theme="dark"
Schakel donkere kleurmodus in op een scope
<div class="ratio ratio-16x9">
Responsieve aspect-ratio-box
visually-hidden
Verberg visueel, behoud voor screenreaders
visually-hidden-focusable
Verborgen tot gefocust (skip links)
stretched-link
Maak een parent volledig klikbaar
clearfix
Maak floated children vrij
<div class="vstack gap-2">
Verticale stapel elementen
<div class="hstack gap-2">
Horizontale stapel elementen
<a class="icon-link">
Link uitgelijnd met een inline-icoon
<div class="progress">
Voortgangsbalk-container
<nav class="breadcrumb">
Breadcrumb-navigatiepad
Geen vermelding komt overeen met “:q”.
Hulp nodig?
Een probleem met deze tool gevonden? Laat het ons weten.