Chiudi menu
Mostra/Nascondi menu
< Home
Stampa

CSS e Bootstrap

Sommario

CSS

CSS (Cascading Style Sheet) è un linguaggio di markup (ma senza parentesi angolari) che definisce stile e layout di una pagina HTML. Questo linguaggio nasce per separare contenuto dalla sua presentazione, questo perché ciò consente sia di adattare il contenuto a dispositivi differenti (es. pc o smartphone) sia per permettere di dare un tema diverso alla stessa pagina (es. tema scuro o tema chiaro).

CSS interviene nello specifico in questi aspetti:

  • colori
  • font
  • margini
  • icone
  • layout degli elementi in pagina

Un CSS può essere definito sia nella pagina HTML (usando il tag <style>) sia con un documento separato (detto foglio di stile), pratica preferita per avere una corretta separazione.

Il foglio CSS è un documento di testo prevede una o più regole da applicare all’HTML a cui è associato, nella forma:

regola1 {
  proprietà1: valore;
  proprietà2: valore;
}

regola2 {
...
}

...

Ad esempio: 

body {
  background-color: black;
  color: white;
}

Questa regola dice che nel body lo sfondo deve essere nero e il testo bianco.

La regola è indicata tramite un selettore CSS, una stringa che identifica l’oggetto o gli oggetti della pagina per cui si definisce la regola. In particolare è possibile definire delle “classi” CSS che indicano un raggruppamento di proprietà che verranno applicate. Una classe è quindi un marcatore che associa un nome ad un gruppo di stili e viene associata a quei tag con attributo class=”nomeclasse”.

Vediamo ora i selettori più comuni:

  • * -> tutti gli elementi
  • element (es. div, h1, p, ecc.) -> seleziona tutti gli elementi con quel tag
  • .class (es. corpotesto, .header, ecc.) -> definisce una classe che sarà applicata a tutti gli elementi che la indicano
  • #id (“#titolo-pagina”) -> identifica l’elemento che ha id corrispondente

è possibile anche fare selezione multipla:

  • div .introduzione (seleziona tutti i div che hanno come classe introduzione)
  • div h1 (seleziona tutti i div e gli h1).

Qui un elenco di proprietà comuni degli elementi. Le proprietà CSS sono parecchie ne indichiamo le principali:

Testo

  • color → colore del testo
  • font-family → tipo di carattere
  • font-size → dimensione del testo
  • font-weight → spessore (es. normal, bold)
  • text-align → allineamento (left, center, right, justify)
  • text-decoration → sottolineato, barrato
  • line-height → altezza della riga
  • letter-spacing → spaziatura tra lettere
  • word-spacing → spaziatura tra parole

Colori

  • background-color → colore di sfondo
  • background-image → immagine di sfondo

Per quanto riguarda i colori è possibile assegnare il colore in due modi:

  • tramite un nome colore (sono attualmente previsti circa un centinaio di nomi colore, come “yellow”, “green”, “red”);
  • tramite un codice colore.

Codice colore

Il codice rappresenta una combinazione di colori RGB, nella forma #abcdef dove

  • le prime due cifre sono il rosso;
  • le seconde due sono il verde;
  • le terze due sono il blu

Si ricorda che sono espresse in esadecimale (due cifre da 0 a 9 e poi da a a f) quindi da 00 (assenza di colore) a ff colore pieno. Pertanto ad esempio:

  • ff0000: rosso
  • 00ff00: verde
  • 0000ff: blu

Qui un sito dove generare il codice colore da un colore specifico: https://www.w3schools.com/colors/colors_picker.asp

Layout

  • width → larghezza
  • height → altezza
  • margin → margini esterni
  • padding → margini interni
  • border → bordo (stile, colore, spessore) es. border: 1px solid black;
  • border-radius → angoli arrotondati
  • display → tipo di visualizzazione
    • block: block occupa tutto lo spazio della pagina in larghezza e forza di andare a capo
    • inline: occupa lo spazio necessario e non va a capo
    • none: l’elemento viene nascosto
    • flex: consente un allineamento dinamico in base alla pagina (sono poi presenti altre proprietà per descrivere il flusso, es flex-direction, flex-wrap e align-items).
  • position → posizionamento (static, relative, absolute, fixed, sticky)
  • top, right, bottom, left → offset posizione (di quanto si sposta rispetto alla posizione)
  • z-index → livello di sovrapposizione (di oggetti che occupano lo stesso spazio)
  • overflow → gestione contenuto traboccante (hidden, scroll, auto) per quei contenuti che superano la dimensione del contenitore (es. testo che scrolla)

Importante capire che le dimensioni possono essere espresse in due unità di misura diverse:

  • px: indica una misura fissa di pixel sullo schermo. Questa non cambia in base alla dimensione dello schermo, pertanto se si esegue uno zoom la dimensione resta fissa;
  • em: indica la dimensione in base alla dimensione del font (font-size) dell’elemento padre quindi è proporzionale ad essa. Ad esempio se una pagina ha font dimensione 10px, 1em corrisponde a 10px, 0.9em sono 9px e così via. Se però si esegue zoom ad esempio del 20% la dimensione del font aumenta del 20% e quindi tutte le dimensioni in em, mantenendo quindi tutte le proporzioni;
  • rem: come gli em, ma la misura è proporzionale all’elemento <html> e quindi sono globali in tutta la pagina.

Cosa significa Cascading

Per cascading si intende il fatto che una regola CSS non si applica solo all’elemento, ma anche a tutti gli elementi in esso contenuti. Ad esempio se un div contiene un altro div, anche il div contenuto eredita lo stesso stile CSS. Questo meccanismo permette di risparmiare codice e non dover fissare una regola per tutti gli elementi di una intera sezione del sito. E’ comunque possibile ad ogni livello definire regole specifiche per il singolo elemento. Ad esempio se vogliamo che un testo che sia scritto con un font tipo Arial ma i titoli in Verdana, daremo come regola del contenitore Arial e solo per i titoli font Verdana.

Qui una pagina riassuntiva completa di tutti i CSS: https://websitesetup.org/css3-cheat-sheet/. In questa pagina https://playcode.io/css si ha un utile strumento per testare html e css.

Bootstrap

Nei progetti più avanzati è quindi necessario scrivere fogli di stile per definire un layout completo delle pagine Web. E’ in generale compito dei grafici digitali, che dopo aver disegnato un layout con strumenti grafici (es. Figma) realizza anche il CSS corrispondente da applicare all’HTML.

Tuttavia questo corso è focalizzato alla programmazione Web e non alla grafica, quindi pur essendo necessaria una conoscenza di base di CSS, per realizzare le pagine Web necessarie allo sviluppo utilizzeremo un framework, per la precisione Bootstrap.

Cosa è un framework? Un framework, in informatica, è un tipo speciale di libreria che non solo offre delle funzionalità già pronte (un po’ come le librerie di altri linguaggi) ma che aiuta ad impostare un progetto o parte di esso secondo delle linee guida ben specifiche. Bootstrap nello specifico è un framework CSS (che contiene anche del Javascript per gestire le animazioni) che permette non solo di avere delle classi CSS già pronte , ma anche di aiutarci a darci un layout alla pagina flessibile per le nostre esigenze, senza quindi dover scrivere un nostro foglio di stile. Naturalmente il framework va studiato, anche se ha una difficoltà di apprendimento molto minore del CSS.

Bootstrap è il framework CSS più usato al mondo, è molto semplice da usare, e permette di ottenere rapidamente pagine ben leggibili, con strutture anche complesse su colonne e riquadri, con più temi e colori. Rispetta ottimi criteri di usabilità, leggibilità, sicurezza e accessibilità. Si stima che circa il 5% dei siti di tutto il mondo usino Bootstrap.

Lo svantaggio principale è che questi siti peccano di poca originalità, sono tutti abbastanza simili tra loro e con quelli esistenti. Un occhio esperto osserverà subito quando un sito web è fatto con Bootstrap. Ma questo per i nostri scopi non è un reale svantaggio in quanto il Web Design è fuori dagli scopi di questo corso. Imparare il CSS può essere però un utile approfondimento per chi interessato.

Caratteristiche di Bootstrap:

  • molte classi pronte all’uso
  • sistema di layout basato su griglia
  • design responsivo (automaticamente si adatta allo smartphone)
  • componenti pronti (come breadcrumb e finestre modali)
  • animazioni con JS pronte

Per utilizzare Bootstrap si rimanda alla documentazione ufficiale, sempre aggiornata, dove gli argomenti da imparare sono questi:

Dall’introduzione vediamo come inserire Bootstrap in una pagina HTML, ricopiamo qui il codice:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

La parte più importante di Bootstrap è la gestione dei layout, con il suo grid system. Qui la guida di funzionamento:

Il meccanismo di funzionamento è quello di suddividere il container (un div con classe “container”) in una griglia (non una tabella) dove ogni riga è poi soddivisa in un layout di colonne che possono occupare da 1 a 12 colonne, con qualsiasi configurazione. Nella lezione sulla griglia sono presenti diversi esempi. Con questo sistema è possibile quindi creare qualsiasi struttura di pagina web.

E’ importante capire che si possono applicare layout differenti che si attiveranno automaticamente in base al tipo di dispositivo. Vedremo qui sotto degli esempi di utilizzo del grid system.

Esempi

Esempio dei principali oggetti della pagina:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Collegamento Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Guida Base Bootstrap 5 - Esempio Completo</title>
    <style>
        body {
            background-color: #f8f9fa;
        }
        .section-box {
            background-color: white;
            border-radius: 8px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .section-title {
            color: #0d6efd;
            border-bottom: 2px solid #0d6efd;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }
    </style>
</head>
<body class="p-4">

    <div class="container">
        <h1 class="text-center mb-4">Guida Base Bootstrap 5</h1>
        <p class="lead text-center mb-5">Ecco una guida pratica e semplificata a Bootstrap 5, la libreria CSS più diffusa per creare siti web responsive.</p>

        <!-- SEZIONE 1: Container e Grid -->
        <div class="section-box">
            <h2 class="section-title">1) Container e Grid (Desktop e Mobile)</h2>
            <p>Il sistema a griglia di Bootstrap divide la larghezza dello schermo in <strong>12 colonne</strong>.</p>
            <ul>
                <li><code>container</code>: Centra il contenuto con margini laterali.</li>
                <li><code>row</code>: Crea una riga orizzontale.</li>
                <li><code>col-md-X</code>: Definisce quante colonne occupa l'elemento su schermi medi/grandi (desktop). Su mobile, le colonne vanno automaticamente a capo (impilamento verticale).</li>
            </ul>

            <h5 class="mt-4">Container Fluid (Full Width)</h5>
            <div class="container-fluid bg-light border p-3 mb-4">
                Questo container occupa tutto lo schermo.
            </div>

            <h5 class="mt-4">Container Standard (Centrato)</h5>
            <div class="container bg-light border p-3">
                <div class="row">
                    <!-- Colonna 1: su mobile occupa tutto, su desktop 4/12 -->
                    <div class="col-12 col-md-4 bg-primary text-white p-3">
                        Colonna 1 (col-md-4)
                    </div>
                    
                    <!-- Colonna 2: su mobile occupa tutto, su desktop 8/12 -->
                    <div class="col-12 col-md-8 bg-secondary text-white p-3">
                        Colonna 2 (col-md-8)
                    </div>
                </div>
            </div>
        </div>

        <!-- SEZIONE 2: Testo, Paragrafi e Titoli -->
        <div class="section-box">
            <h2 class="section-title">2) Testo, Paragrafi e Titoli</h2>
            <p>Bootstrap riutilizza i tag HTML standard ma applica stili puliti (font, spaziatura).</p>

            <!-- Classi display per titoli molto grandi -->
            <h1 class="display-1">Titolo Display 1</h1>
            <h2 class="display-6">Titolo Display 6</h2>

            <!-- Classi utility per il testo -->
            <p class="lead">Questo è un paragrafo "Lead", usato per introdurre il testo.</p>
            
            <div class="row">
                <div class="col-md-6">
                    <p>Questo è un testo normale con <strong>grassetto</strong> e <em>corsivo</em>.</p>
                    <!-- Allineamento testo -->
                    <p class="text-center">Testo centrato</p>
                    <p class="text-end">Testo allineato a destra</p>
                </div>
            </div>
        </div>

        <!-- SEZIONE 3: Liste -->
        <div class="section-box">
            <h2 class="section-title">3) Liste</h2>
            <p>Possiamo usare le liste HTML standard o le "List Group" di Bootstrap per un look più moderno.</p>

            <!-- Lista HTML Standard -->
            <h5 class="mt-4">List Group</h5>
            <ul class="list-group">
                <li class="list-group-item active">Elemento attivo</li>
                <li class="list-group-item">Secondo elemento</li>
                <li class="list-group-item disabled">Elemento disabilitato</li>
            </ul>

            <hr>

            <!-- Lista Inline (orizzontale) -->
            <h5 class="mt-4">Lista Inline</h5>
            <ul class="list-inline">
                <li class="list-inline-item">Home</li>
                <li class="list-inline-item">Chi Siamo</li>
                <li class="list-inline-item">Contatti</li>
            </ul>
        </div>

        <!-- SEZIONE 4: Tabelle -->
        <div class="section-box">
            <h2 class="section-title">4) Tabelle</h2>
            <p>Le tabelle HTML sono noiose di default. Bootstrap le rende leggibili e interattive con classi specifiche.</p>

            <div class="table-responsive"> <!-- Permette lo scroll su mobile -->
                <table class="table table-striped table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Nome</th>
                            <th>Cognome</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mario</td>
                            <td>Rossi</td>
                            <td>mario@example.com</td>
                        </tr>
                        <tr class="table-success"> <!-- Righe colorate -->
                            <td>2</td>
                            <td>Luca</td>
                            <td>Bianchi</td>
                            <td>luca@example.com</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- SEZIONE 5: Form -->
        <div class="section-box">
            <h2 class="section-title">5) Form</h2>
            <p>I form di Bootstrap gestiscono etichette, spaziatura e pulsanti in modo coerente.</p>

            <form class="row g-3"> <!-- g-3 aggiunge spaziatura tra gli elementi -->
                <div class="col-md-6">
                    <label for="nome" class="form-label">Nome</label>
                    <input type="text" class="form-control" id="nome" placeholder="Inserisci nome">
                </div>
                
                <div class="col-md-6">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="nome@esempio.com">
                </div>

                <div class="col-12">
                    <label for="messaggio" class="form-label">Messaggio</label>
                    <textarea class="form-control" id="messaggio" rows="3"></textarea>
                </div>

                <div class="col-12">
                    <!-- Checkbox e Radio -->
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="check1">
                        <label class="form-check-label" for="check1">Accetto i termini</label>
                    </div>
                </div>

                <div class="col-12">
                    <!-- Pulsanti -->
                    <button type="submit" class="btn btn-primary">Invia</button>
                    <button type="reset" class="btn btn-outline-secondary">Reset</button>
                </div>
            </form>
        </div>

        <!-- SEZIONE 6: Ancore, Immagini e Placeholders -->
        <div class="section-box">
            <h2 class="section-title">6) Ancore, Immagini e Placeholders</h2>
            <p>Qui mostriamo come trasformare un link in un pulsante e come rendere le immagini responsive (si ridimensionano su mobile).</p>

            <!-- Link trasformati in pulsanti -->
            <h5 class="mt-4">Link come Pulsanti</h5>
            <div class="mb-4">
                <a href="#" class="btn btn-success mb-2 me-2">Link Pulsante Verde</a>
                <a href="#" class="btn btn-outline-danger mb-2">Link Pulsante Bordo Rosso</a>
            </div>

            <!-- Immagini Responsive -->
            <h5 class="mt-4">Immagini Responsive</h5>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <!-- Uso un placeholder online per l'esempio -->
                    <img src="https://placehold.co/600x400" class="img-fluid rounded shadow" alt="Placeholder Immagine">
                    <p class="text-muted mt-2 text-center">L'immagine si adatta alla larghezza dello schermo.</p>
                </div>
            </div>
        </div>

        <!-- SEZIONE 7: Cards con Foto -->
        <div class="section-box">
            <h2 class="section-title">7) Cards con Foto (Card Component)</h2>
            <p>Le Card sono il componente più versatile di Bootstrap: contengono contenuto, immagini e azioni in un unico blocco.</p>

            <!-- Griglia per le card -->
            <div class="row">
                
                <!-- Card 1 -->
                <div class="col-md-4 mb-4">
                    <div class="card h-100 shadow-sm"> <!-- h-100 rende tutte le card alte uguali -->
                        <img src="https://placehold.co/400x250" class="card-img-top" alt="Foto 1">
                        <div class="card-body">
                            <h5 class="card-title">Titolo Card 1</h5>
                            <p class="card-text">Questa è una breve descrizione del contenuto della card. Serve a dare contesto all'utente.</p>
                        </div>
                        <div class="card-footer bg-transparent border-top-0">
                            <button class="btn btn-primary w-100">Vai al dettaglio</button>
                        </div>
                    </div>
                </div>

                <!-- Card 2 -->
                <div class="col-md-4 mb-4">
                    <div class="card h-100 shadow-sm border-warning">
                        <!-- Immagine in basso -->
                        <div class="card-body">
                            <h5 class="card-title">Titolo Card 2</h5>
                            <p class="card-text">Questa card ha il testo prima dell'immagine.</p>
                        </div>
                        <img src="https://placehold.co/400x250" class="card-img-bottom" alt="Foto 2">
                    </div>
                </div>

            </div>
        </div>

    </div>

    <!-- Script Bootstrap 5 (opzionale, per componenti interattivi) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Di seguito alcune pagine specifiche.

Pagina personale

  • container ccon una riga e due colonne.
  • Nella colonna di sinistra ci sarà una foto profilo, nella colonna di destra testi con titolo, sottotitolo, breve biografia.
  • Infine un pulsante “contattami”.
<body>
  <div class="container py-5">
    <div class="row align-items-center">
      <div class="col-md-4 text-center mb-3 mb-md-0">
        <img src="https://placehold.co/400" class="img-fluid rounded-circle" alt="Foto profilo">
      </div>
      <div class="col-md-8">
        <h1 class="display-5">Mario Rossi</h1>
        <h3 class="text-muted">Web Developer</h3>
        <p class="mt-3">Sono uno sviluppatore web appassionato di design e tecnologia. Amo creare applicazioni responsive e accessibili con HTML, CSS, Bootstrap e JavaScript.</p>
        <button class="btn btn-primary">Contattami</button>
      </div>
    </div>
  </div>
</body>

Homepage di un ristorante

  • Barra di navigazione (navbar) in cima con logo + link “Menu”, “Chi siamo”, “Prenotazioni”.
  • immagine grande di sfondo con titolo e sottotitolo centrati.
  • Sezione menu con cards per tre piatti, ogni card con immagine, titolo, descrizione, prezzo.
  • footer con contatti e icone social.
<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Bella Vita</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Chi siamo</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Prenotazioni</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <header class="bg-dark text-white text-center py-5" style="background: url('https://via.placeholder.com/1200x400') center/cover;">
    <div class="container">
      <h1 class="display-4 fw-bold">Benvenuti al Ristorante Bella Vita</h1>
      <p class="lead">Tradizione e gusto nel cuore della città</p>
      <a href="#" class="btn btn-primary btn-lg">Prenota un tavolo</a>
    </div>
  </header>

  <!-- Sezione Menu -->
  <section class="container py-5">
    <h2 class="text-center mb-4">I nostri piatti</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card">
          <img src="https://placehold.co/400x250" class="card-img-top" alt="Piatto 1">
          <div class="card-body">
            <h5 class="card-title">Pasta fresca</h5>
            <p class="card-text">Preparata con ingredienti genuini e ricette tradizionali.</p>
            <p class="fw-bold">€12</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://placehold.co/400x250" class="card-img-top" alt="Piatto 2">
          <div class="card-body">
            <h5 class="card-title">Pizza margherita</h5>
            <p class="card-text">Cotta nel forno a legna con mozzarella di bufala.</p>
            <p class="fw-bold">€9</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://placehold.co/400x250" class="card-img-top" alt="Piatto 3">
          <div class="card-body">
            <h5 class="card-title">Tiramisù</h5>
            <p class="card-text">Il nostro dolce fatto in casa più richiesto.</p>
            <p class="fw-bold">€6</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-dark text-white text-center py-3">
    <p>© 2025 Ristorante Bella Vita - Seguici sui social</p>
  </footer>
  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

Portfolio di un fotografo

  • Griglia (grid system) con 3 colonne su desktop, 2 colonne su tablet, 1 colonna su smartphone, ogni elemento è un’immagine con didascalia.
  <div class="container py-5">
    <h1 class="text-center mb-4">Portfolio Fotografico</h1>

    <!-- Griglia immagini -->
    <div class="row g-4">
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <img src="https://placehold.co/400x300" class="card-img-top" alt="Foto 1" data-bs-toggle="modal" data-bs-target="#foto1">
          <div class="card-body"><p class="card-text">Paesaggio al tramonto</p></div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <img src="https://placehold.co/400x300" class="card-img-top" alt="Foto 2" data-bs-toggle="modal" data-bs-target="#foto2">
          <div class="card-body"><p class="card-text">Ritratto in studio</p></div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <img src="https://placehold.co/400x300" class="card-img-top" alt="Foto 3" data-bs-toggle="modal" data-bs-target="#foto3">
          <div class="card-body"><p class="card-text">Scatto urbano</p></div>
        </div>
      </div>
    </div>
  </div>

Conclusioni

CSS è un linguaggio per definire lo stile di una pagina web, che comprende grafica, colori, font e soprattutto il layout degli elementi della pagina. Il CSS è un documento composto da regole che tramite selettori CSS definiscono classi e/o selezionano elementi per applicare un insieme di proprietà.

La libreria Bootstrap semplifica la realizzazione del layout e della grafica dei siti web con classi CSS già pronte e con un sistema di layout molto potente e semplice da utilizzare.