Foaie de referință Bootstrap
O referință Bootstrap 5.3 căutabilă și imprimabilă — grilă, spațiere, tipografie, culori, utilitare flex, butoane, formulare și componente. Gratuit.
Grid și layout
12<div class="container">
Container responsiv cu lățime fixă
<div class="container-fluid">
Container pe toată lățimea la fiecare breakpoint
<div class="container-md">
100% lățime până la breakpoint-ul md
<div class="row">
Rând de grid, conține coloane
<div class="col">
Coloană auto cu lățime egală
<div class="col-6">
Se întinde pe 6 din 12 coloane
<div class="col-md-4">
4 coloane de la breakpoint-ul md în sus
<div class="col-auto">
Coloană dimensionată după conținutul ei
<div class="offset-md-2">
Împinge coloana 2 coloane la dreapta
<div class="row g-3">
Spațiere gutter între coloane
<div class="row row-cols-3">
Forțează 3 coloane egale pe rând
<div class="order-2">
Reordonează o coloană flex/grid
Utilitare de spațiere
12m-3
Margine pe toate laturile (scală 0-5)
mt-2
Margine sus
mx-auto
Margini orizontale auto pentru centrare
p-4
Padding pe toate laturile
py-2
Padding vertical (sus și jos)
ms-3
Margine start (stânga în LTR, conștientă de RTL)
me-3
Margine end (dreapta în LTR, conștientă de RTL)
ps-2
Padding start, conștient de RTL
pe-2
Padding end, conștient de RTL
gap-3
Spațiu între elementele flex/grid
m-n1
Margine negativă
p-md-5
Padding responsiv de la md în sus
Tipografie
14<h1>..<h6>
Niveluri de titlu cu stil implicit
<p class="display-1">
Titlu display mare (display-1..6)
<p class="lead">
Paragraf introductiv proeminent
fw-bold
Greutate de font bold
fw-semibold
Greutate de font semibold
fst-italic
Stil de font italic
text-center
Aliniază textul la centru
text-start
Aliniază textul la start, conștient de RTL
text-end
Aliniază textul la end, conștient de RTL
text-truncate
Trunchiază depășirea cu puncte de suspensie
text-uppercase
Transformă textul în majuscule
fs-1
Mărime de font responsivă (fs-1..6)
lh-base
Înălțime de linie de bază (lh-1, lh-sm, lh-lg)
font-monospace
Familie de font monospace
Culori & fundal
10text-primary
Culoare text primară
bg-primary
Culoare de fundal primară
bg-primary-subtle
Nuanță de fundal primară subtilă
text-primary-emphasis
Text primar accentuat, conștient de temă
text-bg-primary
Fundal primar cu text de contrast automat
link-primary
Helper pentru link colorat
bg-opacity-50
Aplică 50% opacitate de fundal
text-body-secondary
Text secundar de corp atenuat
text-body-emphasis
Text de corp cu accent ridicat
border-primary-subtle
Culoare de bordură primară subtilă
Utilitare flex
10d-flex
Creează un container flex
flex-row
Așază elementele pe un rând
flex-column
Așază elementele pe o coloană
justify-content-between
Spațiază elementele de-a lungul axei principale
align-items-center
Centrează elementele pe axa transversală
flex-wrap
Permite elementelor să treacă pe rând nou
flex-grow-1
Lasă un element să crească pentru a umple spațiul
flex-fill
Forțează lățimi flexibile egale
align-self-end
Aliniază un singur element la end
flex-md-row
Direcție flex responsivă de la md
Display și poziție
12d-none
Ascunde elementul
d-md-block
Afișează ca block de la breakpoint-ul md
position-relative
Poziționare relativă
position-absolute
Poziționare absolută
position-fixed
Poziționare fixă
position-sticky
Poziționare sticky
top-0 start-0
Fixează sus-stânga, conștient de RTL
translate-middle
Centrează prin transform translate
fixed-top
Fixează elementul sus în viewport
sticky-top
Lipește sus la derulare
z-3
Setează z-index (z-0..3)
invisible
Ascunde dar păstrează spațiul de layout
Dimensionare și borduri
12w-100
Lățime 100% din părinte
w-50
Lățime 50% din părinte
h-100
Înălțime 100% din părinte
mw-100
Lățime maximă 100%
vh-100
Înălțime 100% din viewport
border
Adaugă o bordură implicită pe toate laturile
border-0
Elimină toate bordurile
border-primary
Colorează bordura
rounded
Border-radius implicit
rounded-pill
Formă de pilulă complet rotunjită
rounded-circle
Border-radius circular
shadow-sm
Umbră de cutie mică (shadow, shadow-lg)
Butoane
9<button class="btn btn-primary">
Buton primar solid
<button class="btn btn-outline-primary">
Variantă de buton outline
<button class="btn btn-lg">
Buton mare (de asemenea btn-sm)
<button class="btn btn-link">
Buton stilizat ca un link
<button class="btn-close">
Buton generic de închidere (×)
<button class="btn disabled">
Stare de buton dezactivat
<button class="btn active">
Stare de buton activ
<div class="d-grid"><button class="btn">
Buton block pe toată lățimea prin d-grid
<div class="btn-group">
Grupează butoanele împreună
Formulare
11<input class="form-control">
Input de text stilizat
<label class="form-label">
Etichetă de câmp de formular
<select class="form-select">
Dropdown select stilizat
<div class="form-check">
Înveliș pentru checkbox/radio
<input class="form-check-input">
Input checkbox sau radio stilizat
<div class="form-check form-switch">
Componentă de comutator toggle
<input class="form-control-lg">
Input mare (de asemenea form-control-sm)
<div class="input-group">
Grupează input-uri cu add-on-uri
is-invalid
Stare de validare invalidă (is-valid)
<div class="form-floating">
Input cu etichetă plutitoare
col-form-label
Etichetă aliniată pentru formulare orizontale
Componente
14<div class="card">
Card de conținut flexibil
<nav class="navbar navbar-expand-lg">
Bară de navigare responsivă
data-bs-toggle="modal" data-bs-target="#m"
Declanșează un dialog modal
data-bs-toggle="dropdown"
Comută un meniu dropdown
data-bs-toggle="collapse"
Comută un element pliabil
<div class="accordion">
Panouri pliabile stivuite
<div class="alert alert-dismissible">
Mesaj de alertă care poate fi închis
<span class="badge text-bg-primary">
Badge mic de contor sau etichetă
<ul class="list-group">
Listă stilizată de elemente
<ul class="nav nav-tabs">
Navigare cu tab-uri
<div class="toast">
Notificare toast ușoară
<div class="offcanvas">
Panou sidebar off-canvas
<div class="spinner-border">
Indicator spinner de încărcare
<nav><ul class="pagination">
Linkuri de navigare paginată
Helper-e și diverse
11data-bs-theme="dark"
Activează modul de culoare întunecat pe un domeniu
<div class="ratio ratio-16x9">
Cutie cu raport de aspect responsiv
visually-hidden
Ascunde vizual, păstrează pentru cititoarele de ecran
visually-hidden-focusable
Ascuns până la focalizare (skip links)
stretched-link
Fă un părinte complet clickabil
clearfix
Curăță copiii floated
<div class="vstack gap-2">
Stivă verticală de elemente
<div class="hstack gap-2">
Stivă orizontală de elemente
<a class="icon-link">
Link aliniat cu o pictogramă inline
<div class="progress">
Container pentru bară de progres
<nav class="breadcrumb">
Traseu de navigare breadcrumb
Nicio intrare nu corespunde cu „:q”.
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.