Bootstrap Italia

https://italia.github.io/bootstrap-italia
Admin
Bootstrap Italia is an open-source front-end framework based on Bootstrap 5 for creating inclusive,...
Tokens:333,265
Snippets:1,848
Trust Score:8.3
Update:2 months ago
Show doc for...
Tokens:
Raw
### Zoom Out Icon

Source: https://italia.github.io/bootstrap-italia/docs/utilities/icone

Example of implementing the zoom-out icon.

```html
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-zoom-out"></use></svg> <span>it-zoom-out</span>
```

--------------------------------

### Installazione dipendenze progetto

Source: https://italia.github.io/bootstrap-italia/docs/come-iniziare/strumenti-di-compilazione

Comando per installare le dipendenze del progetto definite nel file package.json.

```bash
npm install
```

--------------------------------

### Compilazione libreria

Source: https://italia.github.io/bootstrap-italia/docs/come-iniziare/strumenti-di-compilazione

Comando per avviare la compilazione dei file sorgente di Bootstrap Italia.

```bash
npm run build
```

--------------------------------

### Empty Code Block

Source: https://italia.github.io/bootstrap-italia/docs/componenti/accordion

An empty code block example provided in the source.

```text
  
---|---  
`
```

--------------------------------

### Inline Card Initialization

Source: https://italia.github.io/bootstrap-italia/docs/componenti/card

Partial snippet showing the start of an inline card structure.

```html
<div class="row">
  <div class="col-12 col-md-12 col-lg-12 col-xl-10 mb-3 mb-md-4">
    <!--start it-card-->
```

--------------------------------

### Verifica installazione Node.js e npm

Source: https://italia.github.io/bootstrap-italia/docs/come-iniziare/strumenti-di-compilazione

Comandi per verificare la disponibilità di Node.js e npm nel sistema.

```bash
node -v
```

```bash
npm -v
```

--------------------------------

### Avvio ambiente di sviluppo

Source: https://italia.github.io/bootstrap-italia/docs/come-iniziare/strumenti-di-compilazione

Comando per avviare la compilazione dei sorgenti, il build della documentazione e il server locale.

```bash
npm start
```

--------------------------------

### Manual Dropdown Initialization

Source: https://italia.github.io/bootstrap-italia/docs/componenti/dropdown

Example of how to import and initialize the Dropdown component manually using JavaScript.

```javascript
import { Dropdown } from 'bootstrap-italia';

const dropdownEl = document.getElementById('myDropdown');
const dropdown = new Dropdown(dropdownEl, options)
```

--------------------------------

### Implementazione Toolbar Small

Source: https://italia.github.io/bootstrap-italia/docs/menu-di-navigazione/toolbar

Esempio di toolbar in versione ridotta con icone e testo nascosto per l'accessibilità.

```html
<nav class="toolbar toolbar-small">
  <ul>
    <li>
      <a href="#" class="active">
        <svg class="icon icon-sm"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="visually-hidden">messaggi</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-camera"></use></svg>
        <span class="visually-hidden">immagini</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg>
        <span class="visually-hidden">documenti</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-locked"></use></svg>
        <span class="visually-hidden">privacy</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="visually-hidden">preferiti</span>
      </a>
    </li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <svg class="icon icon-sm"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-download"></use></svg>
        <span class="visually-hidden">downloads</span>
      </a>
    </li>
  </ul>
</nav>
```

--------------------------------

### Popover positioning examples

Source: https://italia.github.io/bootstrap-italia/docs/componenti/popover

Demonstrates popovers placed in different directions using the data-bs-placement attribute.

```html
<div class="container">
  <div class="row">
    <div class="col-12 col-md-4"></div>
    <div class="col-12 col-md-4">
      <button type="button" class="btn btn-secondary fade show" data-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Titolo del Popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." style="width:100%;">
        Popover in alto
      </button>
    </div>
    <div class="col-12 col-md-4"></div>
  </div>
  <div class="row mt-4">
    <div class="col-12 col-md-4">
      <button type="button" class="btn btn-secondary fade show" data-container="body" data-bs-toggle="popover" data-bs-placement="right" title="Titolo del Popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." style="width:100%;">
        Popover a destra
      </button>
    </div>
    <div class="col-12 col-md-4"></div>
    <div class="col-12 col-md-4 mt-4 mt-md-0">
      <button type="button" class="btn btn-secondary fade show" data-container="body" data-bs-toggle="popover" data-bs-placement="left" title="Titolo del Popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." style="width:100%;">
        Popover a sinistra
      </button>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col-12 col-md-4"></div>
    <div class="col-12 col-md-4">
      <button type="button" class="btn btn-secondary fade show" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Titolo del Popover" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." style="width:100%;">
        Popover in basso
      </button>
    </div>
    <div class="col-12 col-md-4"></div>
  </div>
</div>
```

--------------------------------

### Pre-activated Dimmer Toggle

Source: https://italia.github.io/bootstrap-italia/docs/componenti/dimmer

Example of a dimmer toggle that is checked by default using the 'checked' attribute.

```html
<div class="toggles col-md-6 col-lg-4">
  <label for="toggleDimmer3">
    Attiva Dimmer 2
    <input type="checkbox" id="toggleDimmer3" data-bs-toggle="dimmer" data-bs-target="#dimmer3" checked>
    <span class="lever"></span>
  </label>
</div>
```

--------------------------------

### Implementazione paginazione simple mode

Source: https://italia.github.io/bootstrap-italia/docs/componenti/paginazione

Esempio di navigazione semplice che utilizza icone chevron per la navigazione tra le pagine.

```html
<nav class="pagination-wrapper" aria-label="Esempio di navigazione simple mode">
  <ul class="pagination" aria-label="Pagina 1 di 5">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-hidden="true">
        <svg class="icon icon-primary"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item"><span class="page-link" aria-current="page">1</span></li>
    <li class="page-item"><span class="page-link">/</span></li>
    <li class="page-item"><span class="page-link">5</span></li>
    <li class="page-item visually-hidden">
      <a class="page-link" href="#" aria-current="page">Pagina 1 di 5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
</nav>
```

--------------------------------

### Avvio dell'ambiente di sviluppo con Docker

Source: https://italia.github.io/bootstrap-italia/docs/come-iniziare/strumenti-di-compilazione

Comando per avviare il container Docker, installare le dipendenze e compilare i file necessari con preview attiva.

```bash
docker-compose up
```

--------------------------------

### Avatar Presence Indicators

Source: https://italia.github.io/bootstrap-italia/docs/componenti/avatar

Examples of avatars with different presence states including active, busy, and hidden.

```html
<div class="avatar size-xl">
      <img src="https://randomuser.me/api/portraits/men/43.jpg" alt="Mario Rossi">
      <div class="avatar-presence active">
        <span class="visually-hidden">Presenza: attivo</span>
      </div>
    </div>
  </div>
  <div class="avatar-wrapper">
    <div class="avatar size-xl">
      <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Luisa Neri">
      <div class="avatar-presence busy">
        <svg class="icon icon-white"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-minus"></use></svg>
        <span class="visually-hidden">Presenza: non disponibile</span>
      </div>
    </div>
  </div>
  <div class="avatar-wrapper">
    <div class="avatar size-xl">
      <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Gioacchino Romani">
      <div class="avatar-presence hidden">
        <span class="visually-hidden">Presenza: invisibile</span>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Affix structural HTML example

Source: https://italia.github.io/bootstrap-italia/docs/componenti/affix

Basic HTML structure used for implementing the Affix component layout.

```html
<p class="d-none d-md-block">Mauris placerat commodo tincidunt. Mauris finibus hendrerit molestie. Vestibulum gravida, lectus sed semper fringilla, libero felis vehicula quam, at efficitur nisl justo mattis orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla rutrum venenatis tellus, vel suscipit tellus faucibus at. Curabitur varius nisi a erat vulputate aliquet. Vivamus eu purus pretium, porta lacus id, mattis ligula. Phasellus eu aliquam nisi. Nunc dictum in nulla eget porttitor. Mauris dapibus vitae orci id posuere. Cras in mollis tortor. Sed felis turpis, auctor ullamcorper ipsum vel, porta tempor felis. Integer rutrum nulla nisi, quis facilisis ipsum hendrerit non. Aenean at fringilla ipsum. Mauris sodales fermentum magna volutpat imperdiet. Nullam condimentum orci purus, eget vulputate ipsum dapibus sit amet.</p>
    </div>
  </div>
  <div class="row p-2 d-none d-md-block">
    <p>Mauris placerat commodo tincidunt. Mauris finibus hendrerit molestie. Vestibulum gravida, lectus sed semper fringilla, libero felis vehicula quam, at efficitur nisl justo mattis orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla rutrum venenatis tellus, vel suscipit tellus faucibus at. Curabitur varius nisi a erat vulputate aliquet. Vivamus eu purus pretium, porta lacus id, mattis ligula. Phasellus eu aliquam nisi. Nunc dictum in nulla eget porttitor. Mauris dapibus vitae orci id posuere. Cras in mollis tortor. Sed felis turpis, auctor ullamcorper ipsum vel, porta tempor felis. Integer rutrum nulla nisi, quis facilisis ipsum hendrerit non. Aenean at fringilla ipsum. Mauris sodales fermentum magna volutpat imperdiet. Nullam condimentum orci purus, eget vulputate ipsum dapibus sit amet.</p>
  </div>
</div>
```

--------------------------------

### Implementazione lista con icone e metadati

Source: https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste

Struttura HTML per elementi di lista che includono icone di azione e metadati.

```html
<a href="#" aria-label="Testo 2 - Azione 1">
              <svg class="icon">
                <title>Codice</title>
                <use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Testo 2 - Azione 2">
              <svg class="icon">
                <title>Codice</title>
                <use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Testo 2 - Azione 3">
              <svg class="icon">
                <title>Codice</title>
                <use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
    <li>
      <div  class="list-item">
        <div class="it-right-zone">
          <div>
            <h4 class="text m-0"><a href="#">Link</a></h4>
            <p class="small m-0">Lorem ipsum dolor sit amet.</p>
          </div>
          <span class="it-multiple">
            <span class="metadata"><a href="#">metadata link</a></span>
            <a href="#" aria-label="Link - Azione 1">
              <svg class="icon">
                <title>Codice</title>
                <use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 2">
              <svg class="icon">
                <title>Codice</title>
                <use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 3">
              <svg class="icon">
                <title>Codice</title>
                <use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
    <li>
      <div class="list-item">
        <div class="it-right-zone">
          <div>
            <h4 class="text m-0"><a href="#">Link</a></h4>
            <p class="small m-0">Lorem ipsum dolor sit amet.</p>
          </div>
          <span class="it-multiple">
            <span class="metadata">metadata testo</span>
            <a href="#" aria-label="Link - Azione 1">
              <svg class="icon">
                <title>Codice</title>
                <use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 2">
              <svg class="icon">
                <title>Codice</title>
                <use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 3">
              <svg class="icon">
                <title>Codice</title>
                <use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
  </ul>
</div>
```

--------------------------------

### Installazione tramite NPM

Source: https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione

Comando per installare l'ultima versione di Bootstrap Italia nel progetto.

```bash
npm i bootstrap-italia@latest --save
```

--------------------------------

### Standard Card Layouts

Source: https://italia.github.io/bootstrap-italia/docs/componenti/card

Examples of cards with images, text, and footer actions using Bootstrap grid classes.

```html
<div class="row">
  <div class="col-12 col-md-6 col-lg-6 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-image it-card-height-full rounded border shadow-sm mb-3">
      <h3 class="it-card-title ">
        <a href="#">Titolo evento</a>
      </h3>
      <div class="it-card-image-wrapper">
        <div class="ratio ratio-16x9">
          <figure class="figure img-full">
            <img src="https://picsum.photos/seed/city/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
          </figure>
        </div>
      </div>
      <div class="it-card-body">
        <p class="it-card-subtitle">Dal 4 al 6 agosto</p>
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
        <footer class="it-card-related">
          <div class="it-card-taxonomy">
            <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
          </div>
          <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
        </footer>
      </div>
      <div class="it-card-footer" aria-label="Link correlati:">
        <a href="#" class="it-card-link">Iscriviti all'evento</a>
      </div>
    </article>
    <!--end it-card-->
  </div>
  <div class="col-12 col-md-6 col-lg-6 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-image it-card-height-full rounded border shadow-sm mb-3">
      <h3 class="it-card-title ">
        <a href="#">Titolo evento</a>
      </h3>
      <div class="it-card-image-wrapper">
        <div class="ratio ratio-16x9">
          <figure class="figure img-full">
            <img src="https://picsum.photos/seed/nature/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
          </figure>
        </div>
      </div>
      <div class="it-card-body">
        <p class="it-card-subtitle">Dal 4 al 6 novembre</p>
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
      </div>
      <div class="it-card-footer" aria-label="Link correlati:">
        <button type="button" class="btn btn-outline-secondary">Compila il form di iscrizione</button>
      </div>
    </article>
    <!--end it-card-->
  </div>
</div>
<div class="row">
  <div class="col-12 col-md-6 col-lg-6 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card rounded border shadow-sm mb-3">
      <h3 class="it-card-title ">
        <a href="#">Titolo evento</a>
      </h3>
      <div class="it-card-body">
        <p class="it-card-subtitle"><span class="visually-hidden">Data evento:</span> <time datetime="08-19">19 agosto</time>, <span class="visually-hidden">Orario:</span>  <time>11:30</time>–<time>13:00</time></p>
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
        <footer class="it-card-related">
          <div class="it-card-taxonomy">
            <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
          </div>
          <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
        </footer>
      </div>
    </article>
    <!--end it-card-->
  </div>
</div>
```

--------------------------------

### Implementazione Tab con icone e testo

Source: https://italia.github.io/bootstrap-italia/docs/componenti/tab

Utilizza una lista non ordinata per creare tab che includono icone e testo, con supporto per stati disabilitati.

```html
<ul class="nav nav-tabs nav-tabs-icon-text" id="myTab3" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab1c-tab" data-bs-toggle="tab" href="#tab1b" role="tab" aria-controls="tab1b" aria-selected="true">
      <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg> Tab 1
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab2b-tab" data-bs-toggle="tab" href="#tab2b" role="tab" aria-controls="tab2b" aria-selected="false">
     <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg> Tab 2
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab3b-tab" data-bs-toggle="tab" href="#tab3b" role="tab" aria-controls="tab3b" aria-selected="false">
      <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg> Tab 3
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="tab4b-tab" data-bs-toggle="tab" href="#tab4b" role="tab" aria-controls="tab3b" aria-selected="false" aria-disabled="true" tabindex="-1">
      <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg> Tab 4
    </a>
  </li>
</ul>
<div class="tab-content" id="myTab3Content">
  <div class="tab-pane p-4 fade show active" id="tab1b" role="tabpanel" aria-labelledby="tab1c-tab"><p>Contenuto 1</p></div>
  <div class="tab-pane p-4 fade" id="tab2b" role="tabpanel" aria-labelledby="tab2b-tab"><p>Contenuto 2</p></div>
  <div class="tab-pane p-4 fade" id="tab3b" role="tabpanel" aria-labelledby="tab3b-tab"><p>Contenuto 3</p></div>
  <div class="tab-pane p-4 fade" id="tab4b" role="tabpanel" aria-labelledby="tab4b-tab">Contenuto 4 (non raggiungibile, il tab relativo è disabilitato)</div>
</div>
```

--------------------------------

### Analogue Color Variants Example

Source: https://italia.github.io/bootstrap-italia/docs/utilities/colori-custom

Demonstrates the application of analogue color classes to div elements for background styling.

```html
<div class="row">
  <div class="col-md-3">
    <div class="c-line analogue-1-bg-a1">a1 </div>
    <div class="c-line analogue-1-bg-a2">a2 </div>
    <div class="c-line analogue-1-bg-a3">a3 </div>
    <div class="c-line white-color analogue-1-bg-a4">a4 </div>
    <div class="c-line white-color analogue-1-bg-a5">a5 </div>
    <div class="c-line white-color analogue-1-bg-a6">a6 </div>
    <div class="c-line white-color analogue-1-bg-a7">a7 </div>
    <div class="c-line white-color analogue-1-bg-a8">a8 </div>
    <div class="c-line white-color analogue-1-bg-a9">a9 </div>
    <div class="c-line white-color analogue-1-bg-a10">a10 </div>
    <div class="c-line white-color analogue-1-bg-a11">a11 </div>
    <div class="c-line white-color analogue-1-bg-a12">a12 </div>
  </div>
  <div class="col-md-3">
    <div class="c-line white-color analogue-1-bg-b1">b1</div>
    <div class="c-line white-color analogue-1-bg-b2">b2</div>
    <div class="c-line white-color analogue-1-bg-b3">b3</div>
    <div class="c-line white-color analogue-1-bg-b4">b4</div>
    <div class="c-line white-color analogue-1-bg-b5">b5</div>
    <div class="c-line white-color analogue-1-bg-b6">b6</div>
    <div class="c-line white-color analogue-1-bg-b7">b7</div>
    <div class="c-line white-color analogue-1-bg-b8">b8</div>
  </div>
  <div class="col-md-3">
    <div class="c-line analogue-2-bg-a1">a1</div>
    <div class="c-line analogue-2-bg-a2">a2</div>
    <div class="c-line analogue-2-bg-a3">a3</div>
    <div class="c-line analogue-2-bg-a4">a4</div>
    <div class="c-line analogue-2-bg-a5">a5</div>
    <div class="c-line analogue-2-bg-a6">a6</div>
    <div class="c-line analogue-2-bg-a7">a7</div>
    <div class="c-line analogue-2-bg-a8">a8</div>
    <div class="c-line white-color analogue-2-bg-a9">a9</div>
    <div class="c-line white-color analogue-2-bg-a10">a10</div>
    <div class="c-line white-color analogue-2-bg-a11">a11</div>
    <div class="c-line white-color analogue-2-bg-a12">a12</div>
  </div>
  <div class="col-md-3">
    <div class="c-line white-color analogue-2-bg-b1">b1</div>
    <div class="c-line white-color analogue-2-bg-b2">b2</div>
    <div class="c-line white-color analogue-2-bg-b3">b3</div>
    <div class="c-line white-color analogue-2-bg-b4">b4</div>
    <div class="c-line white-color analogue-2-bg-b5">b5</div>
    <div class="c-line white-color analogue-2-bg-b6">b6</div>
    <div class="c-line white-color analogue-2-bg-b7">b7</div>
    <div class="c-line white-color analogue-2-bg-b8">b8</div>
  </div>
</div>
```

--------------------------------

### Implementazione Toolbar Standard con Divisori

Source: https://italia.github.io/bootstrap-italia/docs/menu-di-navigazione/toolbar

Esempio di toolbar standard che include etichette visibili e divisori tra gli elementi.

```html
<nav class="toolbar">
  <ul>
    <li>
      <a href="#" class="active">
        <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="toolbar-label">messaggi</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-camera"></use></svg>
        <span class="toolbar-label">immagini</span>
      </a>
    </li>
    <li class="toolbar-divider" role="separator" aria-orientation="vertical"></li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg>
        <span class="toolbar-label">documenti</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-locked"></use></svg>
        <span class="toolbar-label">privacy</span>
      </a>
    </li>
    <li class="toolbar-divider" role="separator" aria-orientation="vertical"></li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="toolbar-label">preferiti</span>
      </a>
    </li>
  </ul>
</nav>
```

--------------------------------

### JavaScript Initialization and State Management

Source: https://italia.github.io/bootstrap-italia/docs/form/upload

Example script to initialize the component instance and simulate progress updates and completion.

```javascript
<script>
  //attiva tooltip esempio loading
  function testAnimation() {
    var element = bootstrap.UploadDragDrop.getOrCreateInstance(document.getElementById('uploadChangeStateTarget'));
    var title = document.getElementById('simTitle')
    var text = document.getElementById('simText')

    element.start();
    title.innerText = 'nome_file.pdf';
    text.innerText = 'Caricamento in corso...';

    setTimeout(function() {
        element.progress(0.33)
      }, 1000);

    setTimeout(function(){
        element.progress(0.66)
      }, 2000);

    setTimeout(function(){
        element.progress(0.99)
      }, 3000);

    setTimeout(function(){
        element.success()
        text.innerText = 'Caricamento completato'
      }, 4500);
  }
</script>
```

--------------------------------

### Implementazione lista semplice

Source: https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste

Struttura base di una lista contenente elementi di solo testo e link.

```html
<div class="it-list-wrapper">
  <ul class="it-list">
    <li>
      <div class="list-item">
        <div class="it-right-zone">
          <span class="text">Testo</span>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="list-item">
        <div class="it-right-zone">
          <span class="text">Link</span>
        </div>
      </a>
    </li>
    <li>
      <div class="list-item">
        <div class="it-right-zone">
          <span class="text">Testo</span>
        </div>
      </div>
    </li>
  </ul>
</div>
```

--------------------------------

### Stepper Header Variations

Source: https://italia.github.io/bootstrap-italia/docs/componenti/steppers

Examples of different header styles including text-only, icons with text, and numbered steps.

```html
<!-- Solo testo -->
<div class="steppers bg-dark">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Primo contenuto <svg class="icon steppers-success" aria-hidden="true"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
      <li class="active">Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/6</span>
  </div>
</div>

<!-- Testo e icone -->
<div class="steppers bg-dark">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><svg class="icon" aria-hidden="true"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-calendar"></use></svg>Primo contenuto <svg class="icon steppers-success" aria-hidden="true"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
      <li class="active"><svg class="icon" aria-hidden="true"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-lock"></use></svg>Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li><svg class="icon" aria-hidden="true"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-settings"></use></svg>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/6</span>
  </div>
</div>

<!-- Numeri -->
<div class="steppers bg-dark">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><span class="steppers-number"><svg class="icon steppers-success" aria-hidden="true"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato Step 1</span></span>Primo contenuto</li>
      <li class="active no-line"><span class="steppers-number"><span class="visually-hidden">Attivo Step </span>2</span>Secondo contenuto</li>
      <li><span class="steppers-number"><span class="visually-hidden">Step </span>3</span>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true"><span>1</span> <span class="active">2</span> <span>3</span> <span>4</span></span>
  </div>
</div>
```

--------------------------------

### Implementazione Header Slim con tema chiaro

Source: https://italia.github.io/bootstrap-italia/docs/menu-di-navigazione/header

Utilizzare la classe theme-light sul wrapper dell'header slim per applicare il tema chiaro.

```html
<div class="it-header-slim-wrapper theme-light">
  <div class="container-xxl">
    <div class="row">
      <div class="col-12">
        <div class="it-header-slim-wrapper-content">
          <a class="d-none d-lg-block navbar-brand" href="#">Ente appartenenza</a>
          <div class="nav-mobile">
            <nav aria-label="Navigazione accessoria">
              <a class="it-opener d-lg-none" data-bs-toggle="collapse" href="#menu1b" role="button" aria-expanded="false" aria-controls="menu4">
                <span>Ente appartenenza</span>
                <svg class="icon" aria-hidden="true"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-expand"></use></svg>
              </a>
              <div class="link-list-wrapper collapse" id="menu1b">
                <ul class="link-list">
                  <li><a class="dropdown-item list-item" href="#">Link 1</a></li>
                  <li><a class="list-item active" href="#" aria-current="page">Link 2 (Attivo)</a></li>
                </ul>
              </div>
            </nav>
          </div>
          <div class="it-header-slim-right-zone">
            <div class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Selezione lingua: lingua selezionata</span>
                <span>ITA</span>
                <svg class="icon d-none d-lg-block"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-expand"></use></svg>
              </a>
              <div class="dropdown-menu">
                <div class="row">
                  <div class="col-12">
                    <div class="link-list-wrapper">
                      <ul class="link-list">
                        <li><a class="dropdown-item list-item" href="#"><span>ITA <span class="visually-hidden">selezionata</span></span></a></li>
                        <li><a class="dropdown-item list-item" href="#"><span>ENG</span></a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="it-access-top-wrapper">
              <a class="btn btn-primary btn-sm" href="#">Accedi</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Tooltip HTML structure

Source: https://italia.github.io/bootstrap-italia/docs/componenti/tooltip

Example of how to apply tooltips to links within a text block using the data-bs-toggle attribute.

```html
<div class="tooltip-demo">
  <p class="font-serif muted">
    Ecco un <a href="#" data-bs-toggle="tooltip" title="Primo tooltip">bianco scenario</a><br/>
    per tratteggiarvi l’accompagnamento<br/>
    degli oggetti di sfondo che pur vivono.<br/>
    Non ne sarò <a href="#" data-bs-toggle="tooltip" title="Secondo tooltip">l’artefice</a> impaziente.<br/>
    Berrò alle coppe della nostalgia,<br/>
    avrò preteso d’ozio nelle lacrime...<br/>
    perché non mi ribello alla natura:<br/>
    la mia lentezza li esaspera...<br/>
    La mia lentezza? No, la mia fiducia.<br/>
    Per adesso è deserto.<br/>
    <a href="#" data-bs-toggle="tooltip" title="Terzo tooltip">Il mondo può rifarsi senza me</a>,<br/>
    E intanto gli altri mi denigreranno
  </p>
  <small>
    <em>La città nuova, Alda Merini</em>
  </small>
</div>
```

--------------------------------

### Create simple colored chips

Source: https://italia.github.io/bootstrap-italia/docs/componenti/chips

Use these examples to create simple, large-sized chips with different color variants.

```html
<a class="chip chip-primary chip-lg chip-simple" href="#">
  <span class="chip-label">Primary</span>
</a>


<a class="chip chip-secondary chip-lg chip-simple" href="#">
  <span class="chip-label">Secondary</span>
</a>


<a class="chip chip-success chip-lg chip-simple" href="#">
  <span class="chip-label">Success</span>
</a>


<a class="chip chip-danger chip-lg chip-simple" href="#">
  <span class="chip-label">Danger</span>
</a>


<a class="chip chip-warning chip-lg chip-simple" href="#">
  <span class="chip-label">Warning</span>
</a>
```

--------------------------------

### Aggiornare la versione del pacchetto

Source: https://italia.github.io/bootstrap-italia/docs/come-iniziare/strumenti-di-compilazione

Utilizzare questo comando per incrementare la versione semver, aggiornare i file di configurazione, creare un commit e generare il tag di versione.

```bash
$ npm version [patch, minor, major]
```

--------------------------------

### Standard Card Layouts

Source: https://italia.github.io/bootstrap-italia/docs/componenti/card

Examples of cards used for services and calls, featuring titles, subtitles, taxonomy, and action buttons.

```html
<div class="row">
  <div class="col-12 col-md-6 col-lg-6 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-height-full rounded border shadow-sm mb-3">
      <h4 class="it-card-title ">
        <a href="#">Titolo del servizio</a>
      </h4>
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
        <footer class="it-card-related">
          <div class="it-card-taxonomy">
            <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
          </div>
        </footer>
      </div>
    </article>
    <!--end it-card-->
  </div>
  <div class="col-12 col-md-6 col-lg-6 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-height-full rounded border shadow-sm mb-3">
      <h4 class="it-card-title ">
        <a href="#">Titolo del servizio</a>
      </h4>
      <div class="it-card-body">
       <p class="it-card-subtitle">Sottotitolo del servizio</p>
        <footer class="it-card-related">
          <div class="it-card-taxonomy">
            <div class="chip chip-simple chip-sm chip-success">
              <span class="visually-hidden">Stato del servizio: </span><span class="chip-label">Attivo</span>
            </div>
          </div>
        </footer>
      </div>
      <div class="it-card-footer" aria-label="Link correlati:">
        <a href="#" class="it-card-link">Requisiti per l'accesso</a>
      </div>
    </article>
    <!--end it-card-->
  </div>
</div>
<div class="row">
  <div class="col-12 col-md-6 col-lg-6 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-height-full rounded border shadow-sm mb-3">
      <h4 class="it-card-title ">
        <a href="#">Titolo del bando</a>
      </h4>
      <div class="it-card-body">
        <p class="it-card-subtitle">Sottotitolo del bando</p>
        <footer class="it-card-related">
          <div class="it-card-taxonomy">
            <div class="chip chip-simple chip-sm chip-success">
              <span class="visually-hidden">Stato del bando: </span><span class="chip-label">Aperto</span>
            </div>
          </div>
          <span class="it-card-date text-warning"><strong>Scadenza: </strong><time class="it-card-date text-warning" datetime="2026-10-12">31 gennaio, 2026</time></span>
        </footer>
      </div>
      <div class="it-card-footer" aria-label="Link correlati:">
        <button type="button" class="btn btn-outline-secondary">Compila il form di candidatura</button>
      </div>
    </article>
    <!--end it-card-->
  </div>
</div>
```
Tokens:
Raw