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.<\/p>\n
Bootstrap offre centinaia di classi utility già pronte per layout, componenti, tipografia, colori e molto altro. Combinate con Gutenberg, queste classi ti permettono di:<\/p>\n
Prima di poter usare le classi Bootstrap in Gutenberg, devi caricare il framework nel tuo sito. Ecco i metodi principali:<\/p>\n
\/\/ functions.php del tuo tema\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_style('bootstrap-5', 'https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css', array(), '5.3.3');\n \n \/\/ Opzionale: Bootstrap JS per componenti interattivi\n wp_enqueue_script('bootstrap-5', 'https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js', array(), '5.3.3', true);\n});\n\n\/\/ Carica Bootstrap anche nell'editor Gutenberg\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_style('bootstrap-5-editor', 'https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css', array(), '5.3.3');\n});<\/code><\/pre>\nMetodo 2: via plugin (senza codice)<\/h3>\n
Plugin come Classy Blocks<\/strong> 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.<\/p>\nTutte le classi Bootstrap utili in Gutenberg<\/h2>\n
Ecco una guida completa alle classi Bootstrap che puoi usare nei tuoi blocchi Gutenberg:<\/p>\n
Classi di layout e contenitori<\/h3>\n.container - Contenitore responsive con max-width\n.container-fluid - Contenitore a larghezza piena\n.row - Griglia flessibile per colonne\n.col - Colonna automatica\n.col-6 - Colonna che occupa metà larghezza\n.col-md-4 - Colonna che occupa 1\/3 su schermi medi+\n.col-lg-8 - Colonna che occupa 2\/3 su schermi grandi+\n.d-flex - Attiva flexbox\n.d-grid - Attiva griglia\n.gap-3 - Gap tra elementi<\/code><\/pre>\nClassi di spaziatura (margin e padding)<\/h3>\nm-0, m-1, m-2, m-3, m-4, m-5 - Margin generale\nmt-*, mb-*, ms-*, me-* - Margin top, bottom, start, end\np-0, p-1, p-2, p-3, p-4, p-5 - Padding generale\npt-*, pb-*, ps-*, pe-* - Padding top, bottom, start, end\nmx-auto - Centratura orizzontale<\/code><\/pre>\nClassi di colore e sfondo<\/h3>\n.text-primary - Testo colore primario (blu)\n.text-success - Testo colore successo (verde)\n.text-danger - Testo colore pericolo (rosso)\n.text-white - Testo bianco\n.text-dark - Testo scuro\n.text-muted - Testo grigio\n.bg-primary - Sfondo primario\n.bg-light - Sfondo chiaro\n.bg-dark - Sfondo scuro\n.bg-transparent - Sfondo trasparente<\/code><\/pre>\nClassi di bordo e ombra<\/h3>\n.border - Aggiunge bordo\n.border-0 - Rimuove bordo\n.rounded - Angoli arrotondati\n.rounded-circle - Forma circolare\n.rounded-pill - Forma pillola\n.shadow-none - Nessuna ombra\n.shadow-sm - Ombra leggera\n.shadow - Ombra media\n.shadow-lg - Ombra grande<\/code><\/pre>\nClassi di tipografia<\/h3>\n.text-start - Allineamento sinistra\n.text-center - Allineamento centro\n.text-end - Allineamento destra\n.fw-bold - Testo grassetto\n.fw-normal - Testo normale\n.fst-italic - Testo corsivo\n.lh-1 - Interlinea 1\n.lh-lg - Interlinea grande\n.text-uppercase - Tutto maiuscolo\n.text-lowercase - Tutto minuscolo<\/code><\/pre>\nClassi responsive (le più utili)<\/h3>\n.d-none - Nasconde su tutti i dispositivi\n.d-md-block - Mostra solo su schermi medi+\n.d-lg-none - Nasconde su schermi grandi\n.text-center - Centra su tutti i dispositivi\n.text-md-start - Allinea a sinistra su schermi medi+\n.order-first - Ordine flessibile<\/code><\/pre>\nEsempi pratici di layout con Bootstrap + Gutenberg<\/h2>\n1. Card con ombra e bordo<\/h3>\n
Inserisci queste classi nel campo “Classe CSS aggiuntiva” di un blocco Group o Columns:<\/p>\n
card shadow-sm border-0 rounded-3 p-4 bg-white<\/code><\/pre>\n2. Sezione hero centrata<\/h3>\n
Applica a un blocco Group:<\/p>\n
d-flex flex-column align-items-center justify-content-center text-center py-5<\/code><\/pre>\n3. Griglia di colonne responsive<\/h3>\n
Alle singole colonne all’interno di un Columns block, applica:<\/p>\n
Colonna 1: col-12 col-md-4\nColonna 2: col-12 col-md-4\nColonna 3: col-12 col-md-4<\/code><\/pre>\nIn questo modo su mobile le colonne saranno impilate (col-12), mentre su schermi medi+ formeranno una griglia a 3 colonne (col-md-4).<\/p>\n
4. Badge con stile Bootstrap<\/h3>\n
Su un blocco Paragraph:<\/p>\n
badge bg-primary rounded-pill px-3 py-2<\/code><\/pre>\n5. Sezione con sfondo e padding<\/h3>\n
Su un blocco Group:<\/p>\n
bg-light rounded-4 p-5 shadow-sm<\/code><\/pre>\nIntegrazione tra Bootstrap e il tema Blocksy<\/h2>\n
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.<\/p>\n
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<\/code> per annullare i padding del contenitore Bootstrap.<\/p>\nDomande frequenti su Bootstrap e Gutenberg<\/h2>\n
D: Le classi Bootstrap funzionano nell’editor?<\/strong>
R: Sì, se carichi Bootstrap anche per l’editor (usa l’hook enqueue_block_editor_assets).<\/p>\nD: Posso usare i componenti JavaScript di Bootstrap?<\/strong>
R: Sì, ma devi caricare bootstrap.bundle.min.js e usare i data-attribute corretti nei blocchi HTML personalizzati.<\/p>\nD: Ci sono conflitti con altri plugin?<\/strong>
R: Raramente. Se noti problemi, verifica che non ci siano altri plugin che caricano versioni diverse di Bootstrap.<\/p>\nGestire le classi Bootstrap senza sforzo<\/h2>\n
Con centinaia di classi Bootstrap disponibili, ricordarsele tutte è praticamente impossibile. Classy Blocks<\/strong> 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.<\/p>","protected":false},"excerpt":{"rendered":"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 […]<\/p>\n","protected":false},"author":3,"featured_media":1229,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","ai_primary_source":"Studio Immens Blog","visibility_scope":"","ai_summary":"","ai_intent":"informative","ai_related_resources":"","ai_priority":0,"ai_entity_type":"","ai_is_based_on":"","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"","footnotes":""},"categories":[40],"tags":[112,114,109,110],"ai_visibility":[],"class_list":["post-1158","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo-web","tag-bootstrap-wordpress","tag-framework-css","tag-gutenberg-css","tag-sviluppo-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/comments?post=1158"}],"version-history":[{"count":1,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1158\/revisions"}],"predecessor-version":[{"id":1178,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1158\/revisions\/1178"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/1229"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1158"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}