Bootstrap Italia

Bootstrap Italia provides an extensive library of components for building websites. These components are categorized into two main types:

1. Base Components: These are derived from the standard Bootstrap library but are customized in terms of style, accessibility, and functionality to comply with the Italian Public Administration (PA) design guidelines. Because they are based on Bootstrap, they correspond to standard Bootstrap components and can be referenced in the official Bootstrap documentation.

2. Plugins (Non-native components): These are components not natively present in the standard Bootstrap library that extend the framework's capabilities specifically for the Italian digital ecosystem.

A Toolbar is a container for links, buttons, or dropdowns. It is structured as a <nav> element containing a <ul> list, where each item is represented by an <li> element.

To ensure the toolbar doesn't spread too wide, it is recommended to place it within a container of limited horizontal (or vertical, for vertical toolbars) width.

<nav class="toolbar">
  <ul>
    <li>
      <a href="#">
        <svg class="icon"><use href="#"></use></svg>
        <span class="toolbar-label">label</span>
      </a>
    </li>
  </ul>
</nav>

An Affix element remains anchored to a specific area of the page relative to the viewport. This is commonly used for navigation menus or social media sharing buttons to keep them visible while the user scrolls through page content.

Important: Ensure that an Affix element does not obscure page content, particularly when the viewport size is reduced (e.g., on mobile devices).

While the player controls are accessible to assistive technologies, the video content itself must meet WCAG 1.2 (Time-based Media) guidelines to be truly accessible:

• Video-only or Audio-only content: Provide a text transcription (Success Criterion 1.2.1).
• Subtitles: Always provide subtitles (Success Criterion 1.2.2).
• Audio Descriptions: Provide audio descriptions for scenes or content not described by the primary audio track (Success Criteria 1.2.3 and 1.2.5).

To indicate an account status, insert a <div> with the class .avatar-status inside the .avatar container.

Available statuses:

• Approved: Add the .approved class.
• Declined: Add the .declined class.
• Notification: Add the .notify class.

Accessibility: Always include a <span class="visually-hidden"> inside the status div to provide a text description for screen readers (e.g., Stato: approvato).

<div class="avatar size-xl">
  <img src="path/to/image.jpg" alt="Mario Rossi">
  <div class="avatar-status approved">
    <svg class="icon icon-white"><use href="#it-check"></use></svg>
    <span class="visually-hidden">Stato: approvato</span>
  </div>
</div>

To make collapsible elements accessible to screen readers:

• aria-expanded: Add this to the control element (the button or link). Set it to false if the content is closed by default, and true if the content has the .show class. The JavaScript plugin automatically toggles this attribute.
• role="button": If your control element is not a <button> (e.g., an <a> or <div>), you must add role="button".
• aria-controls: Add this attribute to the control element, containing the id of the collapsible element it manages. This allows assistive technologies to provide shortcuts to the content.

Containers are fundamental elements in Bootstrap Italia and are required when using the grid system. You can choose between a fixed-width container or a fluid container.

• .container: A fixed-width container where the max-width changes at each breakpoint.
• .container-fluid: A fluid container that always occupies 100% of the available width.

<div class="container">
  <!-- Fixed-width content -->
</div>

<div class="container-fluid">
  <!-- Full-width content -->
</div>