Bootstrap-fusklapp
En sökbar, utskrivbar Bootstrap 5.3-referens — rutnät, avstånd, typografi, färger, flex-verktyg, knappar, formulär och komponenter. Gratis.
Rutnät och layout
12<div class="container">
Responsiv container med fast bredd
<div class="container-fluid">
Container med full bredd vid varje brytpunkt
<div class="container-md">
100 % bred fram till md-brytpunkten
<div class="row">
Rutnätsrad, håller kolumner
<div class="col">
Autokolumn med lika bredd
<div class="col-6">
Spänner över 6 av 12 kolumner
<div class="col-md-4">
4 kolumner från md-brytpunkten och uppåt
<div class="col-auto">
Kolumn anpassad till sitt innehåll
<div class="offset-md-2">
Skjut kolumnen 2 kolumner åt höger
<div class="row g-3">
Mellanrum mellan kolumner
<div class="row row-cols-3">
Tvinga 3 lika kolumner per rad
<div class="order-2">
Ordna om en flex-/rutnätskolumn
Mellanrumsverktyg
12m-3
Marginal på alla sidor (skala 0-5)
mt-2
Marginal upptill
mx-auto
Automatiska horisontella marginaler för centrering
p-4
Utfyllnad på alla sidor
py-2
Vertikal utfyllnad (upptill och nedtill)
ms-3
Marginal start (vänster i LTR, RTL-medveten)
me-3
Marginal slut (höger i LTR, RTL-medveten)
ps-2
Utfyllnad start, RTL-medveten
pe-2
Utfyllnad slut, RTL-medveten
gap-3
Mellanrum mellan flex-/rutnätsobjekt
m-n1
Negativ marginal
p-md-5
Responsiv utfyllnad från md och uppåt
Typografi
14<h1>..<h6>
Rubriknivåer med standardstil
<p class="display-1">
Stor display-rubrik (display-1..6)
<p class="lead">
Framträdande inledande stycke
fw-bold
Fet teckenvikt
fw-semibold
Halvfet teckenvikt
fst-italic
Kursiv teckenstil
text-center
Centrera text
text-start
Vänsterjustera text, RTL-medveten
text-end
Högerjustera text, RTL-medveten
text-truncate
Beskär överflöd med ellips
text-uppercase
Omvandla text till versaler
fs-1
Responsiv teckenstorlek (fs-1..6)
lh-base
Bas-radhöjd (lh-1, lh-sm, lh-lg)
font-monospace
Teckensnittsfamilj med fast bredd
Färger och bakgrund
10text-primary
Primär textfärg
bg-primary
Primär bakgrundsfärg
bg-primary-subtle
Subtil primär bakgrundston
text-primary-emphasis
Betonad primärtext, temamedveten
text-bg-primary
Primär bakgrund med autokontrasterande text
link-primary
Hjälpklass för färgad länk
bg-opacity-50
Tillämpa 50 % bakgrundsopacitet
text-body-secondary
Dämpad sekundär brödtext
text-body-emphasis
Starkt betonad brödtext
border-primary-subtle
Subtil primär kantfärg
Flex-verktyg
10d-flex
Skapa en flex-container
flex-row
Lägg objekt i en rad
flex-column
Lägg objekt i en kolumn
justify-content-between
Fördela objekt längs huvudaxeln
align-items-center
Centrera objekt på tväraxeln
flex-wrap
Tillåt element att radbrytas
flex-grow-1
Låt ett objekt växa för att fylla utrymme
flex-fill
Tvinga lika flexibla bredder
align-self-end
Justera ett enskilt objekt till slutet
flex-md-row
Responsiv flex-riktning från md
Display och position
12d-none
Dölj elementet
d-md-block
Visa som block från md-brytpunkten
position-relative
Relativ positionering
position-absolute
Absolut positionering
position-fixed
Fast positionering
position-sticky
Klibbig positionering
top-0 start-0
Fäst uppe till vänster, RTL-medveten
translate-middle
Centrera via transform translate
fixed-top
Fäst element överst i visningsområdet
sticky-top
Fäst överst vid scrollning
z-3
Ange z-index (z-0..3)
invisible
Dölj men behåll layoututrymme
Storlek och kanter
12w-100
Bredd 100 % av föräldern
w-50
Bredd 50 % av föräldern
h-100
Höjd 100 % av föräldern
mw-100
Maxbredd 100 %
vh-100
Höjd 100 % av visningsområdet
border
Lägg till en standardkant på alla sidor
border-0
Ta bort alla kanter
border-primary
Färga kanten
rounded
Standard-border-radius
rounded-pill
Helt rundad pillerform
rounded-circle
Cirkulär border-radius
shadow-sm
Liten boxskugga (shadow, shadow-lg)
Knappar
9<button class="btn btn-primary">
Fylld primärknapp
<button class="btn btn-outline-primary">
Konturknappsvariant
<button class="btn btn-lg">
Stor knapp (även btn-sm)
<button class="btn btn-link">
Knapp formaterad som en länk
<button class="btn-close">
Generisk stäng-knapp (×)
<button class="btn disabled">
Inaktiverat knapptillstånd
<button class="btn active">
Aktivt knapptillstånd
<div class="d-grid"><button class="btn">
Blockknapp med full bredd via d-grid
<div class="btn-group">
Gruppera knappar tillsammans
Formulär
11<input class="form-control">
Formaterat textfält
<label class="form-label">
Etikett för formulärfält
<select class="form-select">
Formaterad rullgardinsmeny
<div class="form-check">
Omslag för kryssruta/radioknapp
<input class="form-check-input">
Formaterad kryssruta eller radioknapp
<div class="form-check form-switch">
Komponent för växlingsreglage
<input class="form-control-lg">
Stort fält (även form-control-sm)
<div class="input-group">
Gruppera fält med tillägg
is-invalid
Ogiltigt valideringstillstånd (is-valid)
<div class="form-floating">
Fält med flytande etikett
col-form-label
Etikett justerad för horisontella formulär
Komponenter
14<div class="card">
Flexibelt innehållskort
<nav class="navbar navbar-expand-lg">
Responsivt navigeringsfält
data-bs-toggle="modal" data-bs-target="#m"
Utlös en modal dialog
data-bs-toggle="dropdown"
Växla en rullgardinsmeny
data-bs-toggle="collapse"
Växla ett hopfällbart element
<div class="accordion">
Staplade hopfällbara paneler
<div class="alert alert-dismissible">
Stängbart varningsmeddelande
<span class="badge text-bg-primary">
Litt räkne- eller etikettmärke
<ul class="list-group">
Formaterad lista med objekt
<ul class="nav nav-tabs">
Flikbaserad navigering
<div class="toast">
Lättviktig toast-avisering
<div class="offcanvas">
Off-canvas-sidopanel
<div class="spinner-border">
Indikator för laddningssnurra
<nav><ul class="pagination">
Sidnumrerade navigeringslänkar
Hjälpklasser och övrigt
11data-bs-theme="dark"
Aktivera mörkt färgläge för en räckvidd
<div class="ratio ratio-16x9">
Responsiv ruta med bildförhållande
visually-hidden
Dölj visuellt, behåll för skärmläsare
visually-hidden-focusable
Dold tills den fokuseras (hopplänkar)
stretched-link
Gör en förälder helt klickbar
clearfix
Rensa flytande barn
<div class="vstack gap-2">
Vertikal stapel av element
<div class="hstack gap-2">
Horisontell stapel av element
<a class="icon-link">
Länk justerad med en inline-ikon
<div class="progress">
Container för förloppsindikator
<nav class="breadcrumb">
Brödsmuls-navigeringsspår
Ingen post matchar “:q”.
Behöver du hjälp?
Hittade du ett problem med det här verktyget? Berätta för oss.