Bootstrap è il framework CSS più popolare al mondo, utilizzato da milioni di siti web per creare interfacce moderne e responsive. Ma integrarlo con Gutenberg, il block editor di WordPress, non è sempre immediato. In questa guida completa vedremo come usare Bootstrap in Gutenberg passo dopo passo, con esempi pratici, configurazioni e soluzioni ai problemi più comuni.
Introduzione: perché usare Bootstrap con Gutenberg
Bootstrap offre centinaia di classi utility già pronte per layout, componenti, tipografia, colori e molto altro. Combinate con Gutenberg, queste classi ti permettono di:
- Creare layout complessi senza scrivere CSS personalizzato
- Garantire la responsività con il sistema a griglia di Bootstrap
- Usare componenti pronti come card, navbar, badge e alert
- Velocizzare lo sviluppo riducendo la quantità di CSS da scrivere
- Mantenere coerenza tra pagine e sezioni del sito
Come caricare Bootstrap in WordPress
Prima di poter usare le classi Bootstrap in Gutenberg, devi caricare il framework nel tuo sito. Ecco i metodi principali:
Metodo 1: via CDN (il più semplice)
// functions.php del tuo tema
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('bootstrap-5', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', array(), '5.3.3');
// Opzionale: Bootstrap JS per componenti interattivi
wp_enqueue_script('bootstrap-5', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array(), '5.3.3', true);
});
// Carica Bootstrap anche nell'editor Gutenberg
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_style('bootstrap-5-editor', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', array(), '5.3.3');
});Metodo 2: via plugin (senza codice)
Plugin come Classy Blocks includono Bootstrap già integrato. Attivi Bootstrap dalle impostazioni del plugin e le classi sono subito disponibili nell’editor Gutenberg, senza dover scrivere una riga di codice o configurare nulla.
Tutte le classi Bootstrap utili in Gutenberg
Ecco una guida completa alle classi Bootstrap che puoi usare nei tuoi blocchi Gutenberg:
Classi di layout e contenitori
.container - Contenitore responsive con max-width
.container-fluid - Contenitore a larghezza piena
.row - Griglia flessibile per colonne
.col - Colonna automatica
.col-6 - Colonna che occupa metà larghezza
.col-md-4 - Colonna che occupa 1/3 su schermi medi+
.col-lg-8 - Colonna che occupa 2/3 su schermi grandi+
.d-flex - Attiva flexbox
.d-grid - Attiva griglia
.gap-3 - Gap tra elementiClassi di spaziatura (margin e padding)
m-0, m-1, m-2, m-3, m-4, m-5 - Margin generale
mt-*, mb-*, ms-*, me-* - Margin top, bottom, start, end
p-0, p-1, p-2, p-3, p-4, p-5 - Padding generale
pt-*, pb-*, ps-*, pe-* - Padding top, bottom, start, end
mx-auto - Centratura orizzontaleClassi di colore e sfondo
.text-primary - Testo colore primario (blu)
.text-success - Testo colore successo (verde)
.text-danger - Testo colore pericolo (rosso)
.text-white - Testo bianco
.text-dark - Testo scuro
.text-muted - Testo grigio
.bg-primary - Sfondo primario
.bg-light - Sfondo chiaro
.bg-dark - Sfondo scuro
.bg-transparent - Sfondo trasparenteClassi di bordo e ombra
.border - Aggiunge bordo
.border-0 - Rimuove bordo
.rounded - Angoli arrotondati
.rounded-circle - Forma circolare
.rounded-pill - Forma pillola
.shadow-none - Nessuna ombra
.shadow-sm - Ombra leggera
.shadow - Ombra media
.shadow-lg - Ombra grandeClassi di tipografia
.text-start - Allineamento sinistra
.text-center - Allineamento centro
.text-end - Allineamento destra
.fw-bold - Testo grassetto
.fw-normal - Testo normale
.fst-italic - Testo corsivo
.lh-1 - Interlinea 1
.lh-lg - Interlinea grande
.text-uppercase - Tutto maiuscolo
.text-lowercase - Tutto minuscoloClassi responsive (le più utili)
.d-none - Nasconde su tutti i dispositivi
.d-md-block - Mostra solo su schermi medi+
.d-lg-none - Nasconde su schermi grandi
.text-center - Centra su tutti i dispositivi
.text-md-start - Allinea a sinistra su schermi medi+
.order-first - Ordine flessibileEsempi pratici di layout con Bootstrap + Gutenberg
1. Card con ombra e bordo
Inserisci queste classi nel campo “Classe CSS aggiuntiva” di un blocco Group o Columns:
card shadow-sm border-0 rounded-3 p-4 bg-white2. Sezione hero centrata
Applica a un blocco Group:
d-flex flex-column align-items-center justify-content-center text-center py-53. Griglia di colonne responsive
Alle singole colonne all’interno di un Columns block, applica:
Colonna 1: col-12 col-md-4
Colonna 2: col-12 col-md-4
Colonna 3: col-12 col-md-4In questo modo su mobile le colonne saranno impilate (col-12), mentre su schermi medi+ formeranno una griglia a 3 colonne (col-md-4).
4. Badge con stile Bootstrap
Su un blocco Paragraph:
badge bg-primary rounded-pill px-3 py-25. Sezione con sfondo e padding
Su un blocco Group:
bg-light rounded-4 p-5 shadow-smIntegrazione tra Bootstrap e il tema Blocksy
Se usi il tema Blocksy (come questo sito), Bootstrap si integra perfettamente. Blocksy usa variabili CSS per la personalizzazione, mentre Bootstrap usa le sue utility class. I due sistemi convivono senza conflitti.
L’unica accortezza: se usi le classi container di Bootstrap all’interno del contenitore di Blocksy, potresti avere margini doppi. In quel caso, usa container-fluid p-0 per annullare i padding del contenitore Bootstrap.
Domande frequenti su Bootstrap e Gutenberg
D: Le classi Bootstrap funzionano nell’editor?
R: Sì, se carichi Bootstrap anche per l’editor (usa l’hook enqueue_block_editor_assets).
D: Posso usare i componenti JavaScript di Bootstrap?
R: Sì, ma devi caricare bootstrap.bundle.min.js e usare i data-attribute corretti nei blocchi HTML personalizzati.
D: Ci sono conflitti con altri plugin?
R: Raramente. Se noti problemi, verifica che non ci siano altri plugin che caricano versioni diverse di Bootstrap.
Gestire le classi Bootstrap senza sforzo
Con centinaia di classi Bootstrap disponibili, ricordarsele tutte è praticamente impossibile. Classy Blocks risolve il problema integrando Bootstrap e altri 7 framework CSS (Tailwind, Bulma, UIkit, Materialize, PureCSS, Spectre, Semantic UI, Foundation) con un’interfaccia a menu a tendina: attivi il framework, e tutte le sue classi diventano selezionabili con un click nell’editor Gutenberg. Gratuito e open source.
