📐 Mini guida pratica all’impaginazione

1️⃣ Tutto parte da row
Ogni riga della pagina deve iniziare con: <div class="row">
Dentro una row vanno solo colonne (col-*).

2️⃣ Le colonne (col) decidono sinistra e destra
Esempio base:

<div class="row">
  <div class="col-md-4">SINISTRA</div>
  <div class="col-md-8">DESTRA</div>
</div>

• col-md-4 = 1/3 larghezza
• col-md-8 = 2/3 larghezza
• Su mobile le colonne vanno automaticamente una sotto l’altra

3️⃣ Cambiare le proporzioni è facilissimo
Puoi usare qualsiasi combinazione che faccia 12:

• col-md-6 + col-md-6 → metà e metà
• col-md-3 + col-md-9 → colonna stretta + larga
• col-md-4 + col-md-4 + col-md-4 → tre colonne uguali

4️⃣ Immagini affiancate al testo
Per mettere un’immagine a sinistra e il testo a destra:

• Immagine → prima colonna
• Testo → seconda colonna
• Usa sempre class="img-fluid" sulle immagini

5️⃣ Elenchi consigliati
Per elenchi puliti e leggibili usa:

<ul class="list-unstyled">
  <li>⚡ Punto elenco</li>
</ul>

6️⃣ Box informativi
Usa gli alert per note, avvisi e suggerimenti. Se il testo risulta centrato, aggiungi sempre: text-start

7️⃣ Metodo di lavoro consigliato

• ✏️ Scrivi il testo normalmente
• 🔧 Apri <> (Codice)
• 📋 Copia il blocco che ti serve da questo articolo
• ✂️ Incollalo e modifica solo il contenuto

💡 Suggerimento finale
Duplica questo articolo e usalo come template per tutte le pagine (Arduino, ESP32, Scratch, progetti, corsi).