Scheda di riferimento Bootstrap
Un riferimento Bootstrap 5.3 stampabile e ricercabile — griglia, spaziatura, tipografia, colori, utility flex, pulsanti, moduli e componenti. Gratis.
Griglia e layout
12<div class="container">
Container responsive a larghezza fissa
<div class="container-fluid">
Container a larghezza piena a ogni breakpoint
<div class="container-md">
Larghezza 100% fino al breakpoint md
<div class="row">
Riga della griglia, contiene colonne
<div class="col">
Colonna auto a larghezza uguale
<div class="col-6">
Occupa 6 colonne su 12
<div class="col-md-4">
4 colonne dal breakpoint md in su
<div class="col-auto">
Colonna dimensionata sul suo contenuto
<div class="offset-md-2">
Sposta la colonna di 2 colonne a destra
<div class="row g-3">
Spaziatura gutter tra le colonne
<div class="row row-cols-3">
Forza 3 colonne uguali per riga
<div class="order-2">
Riordina una colonna flex/grid
Utility di spaziatura
12m-3
Margine su tutti i lati (scala 0-5)
mt-2
Margine superiore
mx-auto
Margini orizzontali auto per centrare
p-4
Padding su tutti i lati
py-2
Padding verticale (sopra e sotto)
ms-3
Margine iniziale (sinistra in LTR, compatibile RTL)
me-3
Margine finale (destra in LTR, compatibile RTL)
ps-2
Padding iniziale, compatibile RTL
pe-2
Padding finale, compatibile RTL
gap-3
Spazio tra gli elementi flex/grid
m-n1
Margine negativo
p-md-5
Padding responsive dal md in su
Tipografia
14<h1>..<h6>
Livelli di intestazione con stile predefinito
<p class="display-1">
Intestazione display grande (display-1..6)
<p class="lead">
Paragrafo di apertura in evidenza
fw-bold
Peso del carattere grassetto
fw-semibold
Peso del carattere semigrassetto
fst-italic
Stile del carattere corsivo
text-center
Allinea il testo al centro
text-start
Allinea il testo all'inizio, compatibile RTL
text-end
Allinea il testo alla fine, compatibile RTL
text-truncate
Tronca l'overflow con i puntini di sospensione
text-uppercase
Trasforma il testo in maiuscolo
fs-1
Dimensione del carattere responsive (fs-1..6)
lh-base
Altezza riga base (lh-1, lh-sm, lh-lg)
font-monospace
Famiglia di caratteri monospace
Colori e sfondo
10text-primary
Colore del testo primario
bg-primary
Colore di sfondo primario
bg-primary-subtle
Tinta di sfondo primaria tenue
text-primary-emphasis
Testo primario enfatizzato, compatibile col tema
text-bg-primary
Sfondo primario con testo a contrasto automatico
link-primary
Helper per link colorato
bg-opacity-50
Applica il 50% di opacità allo sfondo
text-body-secondary
Testo del corpo secondario attenuato
text-body-emphasis
Testo del corpo ad alta enfasi
border-primary-subtle
Colore del bordo primario tenue
Utility flex
10d-flex
Crea un contenitore flex
flex-row
Dispone gli elementi in riga
flex-column
Dispone gli elementi in colonna
justify-content-between
Distribuisce gli elementi lungo l'asse principale
align-items-center
Centra gli elementi sull'asse trasversale
flex-wrap
Consente agli elementi di andare a capo
flex-grow-1
Lascia che un elemento cresca per riempire lo spazio
flex-fill
Forza larghezze flessibili uguali
align-self-end
Allinea un singolo elemento alla fine
flex-md-row
Direzione flex responsive dal md
Display e posizione
12d-none
Nasconde l'elemento
d-md-block
Mostra come block dal breakpoint md
position-relative
Posizionamento relativo
position-absolute
Posizionamento assoluto
position-fixed
Posizionamento fisso
position-sticky
Posizionamento sticky
top-0 start-0
Fissa in alto a sinistra, compatibile RTL
translate-middle
Centra tramite transform translate
fixed-top
Fissa l'elemento in cima al viewport
sticky-top
Resta in cima durante lo scroll
z-3
Imposta z-index (z-0..3)
invisible
Nasconde ma mantiene lo spazio nel layout
Dimensioni e bordi
12w-100
Larghezza 100% del genitore
w-50
Larghezza 50% del genitore
h-100
Altezza 100% del genitore
mw-100
Larghezza massima 100%
vh-100
Altezza 100% del viewport
border
Aggiunge un bordo predefinito su tutti i lati
border-0
Rimuove tutti i bordi
border-primary
Colora il bordo
rounded
Border-radius predefinito
rounded-pill
Forma pill completamente arrotondata
rounded-circle
Border-radius circolare
shadow-sm
Piccola ombra (shadow, shadow-lg)
Pulsanti
9<button class="btn btn-primary">
Pulsante primario pieno
<button class="btn btn-outline-primary">
Variante di pulsante outline
<button class="btn btn-lg">
Pulsante grande (anche btn-sm)
<button class="btn btn-link">
Pulsante con stile da link
<button class="btn-close">
Pulsante di chiusura generico (×)
<button class="btn disabled">
Stato pulsante disabilitato
<button class="btn active">
Stato pulsante attivo
<div class="d-grid"><button class="btn">
Pulsante block a larghezza piena via d-grid
<div class="btn-group">
Raggruppa i pulsanti insieme
Form
11<input class="form-control">
Input di testo con stile
<label class="form-label">
Etichetta di campo del form
<select class="form-select">
Menu a tendina select con stile
<div class="form-check">
Wrapper checkbox/radio
<input class="form-check-input">
Input checkbox o radio con stile
<div class="form-check form-switch">
Componente interruttore toggle
<input class="form-control-lg">
Input grande (anche form-control-sm)
<div class="input-group">
Raggruppa input con add-on
is-invalid
Stato di validazione non valido (is-valid)
<div class="form-floating">
Input con etichetta flottante
col-form-label
Etichetta allineata per form orizzontali
Componenti
14<div class="card">
Card di contenuto flessibile
<nav class="navbar navbar-expand-lg">
Barra di navigazione responsive
data-bs-toggle="modal" data-bs-target="#m"
Attiva una finestra modale
data-bs-toggle="dropdown"
Attiva/disattiva un menu a tendina
data-bs-toggle="collapse"
Attiva/disattiva un elemento collassabile
<div class="accordion">
Pannelli collassabili impilati
<div class="alert alert-dismissible">
Messaggio di avviso chiudibile
<span class="badge text-bg-primary">
Badge piccolo di conteggio o etichetta
<ul class="list-group">
Elenco di elementi con stile
<ul class="nav nav-tabs">
Navigazione a schede
<div class="toast">
Notifica toast leggera
<div class="offcanvas">
Pannello laterale off-canvas
<div class="spinner-border">
Indicatore di caricamento spinner
<nav><ul class="pagination">
Link di navigazione paginati
Helper e varie
11data-bs-theme="dark"
Abilita la modalità colore scura su un ambito
<div class="ratio ratio-16x9">
Box responsive con rapporto d'aspetto
visually-hidden
Nasconde visivamente, mantiene per gli screen reader
visually-hidden-focusable
Nascosto fino al focus (skip link)
stretched-link
Rende un genitore completamente cliccabile
clearfix
Pulisce i figli flottanti
<div class="vstack gap-2">
Pila verticale di elementi
<div class="hstack gap-2">
Pila orizzontale di elementi
<a class="icon-link">
Link allineato con un'icona inline
<div class="progress">
Container della barra di avanzamento
<nav class="breadcrumb">
Percorso di navigazione breadcrumb
Nessuna voce corrisponde a “:q”.
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.