Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

Sections

Sections

Per creare sezioni di layout orizzontale con differenti sfondi.

Per suddividere una pagina in blocchi orizzontali con sfondi differenti utilizzare più elementi <section> con classe .section.

Esempio

Il componente section ha uno spazio interno verticale predefinito e uno sfondo trasparente. Quando si organizzano i contenuti usando le classi della griglia, non serve aggiungere spazio ai lati. Se proprio necessario, si può aggiungere spazio laterale usando la variabile --section-padding-x.

Il contenuto va messo in un <div> con la classe .section-content. Questo contenitore occupa tutta la larghezza disponibile (tranne lo spazio interno). Se gli si assegna una larghezza massima in CSS, verrà automaticamente centrato nella section.

Accessibilità (draft)

Il titolo <h2> dello snippet è solo indicativo. Il tag <section> contraddistingue una sezione semanticamente riconoscibile, associata all’id del titolo dall’attributo aria-labelledby.

Gli autori dovrebbero dividere la pagina in sezioni semantiche reali e non per solo scopo decorativo. Qualora si utilizzino sezioni al solo scopo decorativo sostituire <section> con <div> ed eliminare l’attributo aria-labelledby.

Morbi fermentum amet

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.

Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.

Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<section class="section" aria-labelledby="titleEx1">
  <div class="section-content">
    <!-- START - contenuto di esempio -->
    <div class="container">
      <div class="row mb-3">
        <div class="col-12">
          <h2 id="titleEx1">Morbi fermentum amet</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
        </div>
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</p>
        </div>
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</p>
        </div>
      </div>
    </div>
    <!-- END - contenuto di esempio -->
  </div>
</section>

Colori di sfondo

Il componente Section ha, per default, uno sfondo trasparente. Aggiungendo le classi sottoelencate è possibile aggiungere colori di sfondo.

Sfondo Tenue

Al componente Section può essere applicato uno sfondo di colore tenue utilizzano la classe aggiuntiva .section-muted.

Morbi fermentum amet

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.

Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.

Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<section class="section section-muted" aria-labelledby="titleEx2">
  <div class="section-content">
    <!-- contenuto di esempio START -->
    <div class="container">
      <div class="row mb-3">
        <div class="col-12">
          <h2 id="titleEx2">Morbi fermentum amet</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
        </div>
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</p>
        </div>
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</p>
        </div>
      </div>
    </div>
    <!-- contenuto di esempio END -->
  </div>
</section>

Sfondo Primario

Aggiungendo invece classe .section-primary si otterrà un sfondo del colore primario.

Si consiglia di applicare la classe .white-color al contenuto (come da esempio) per garantire la leggibilità dei testi contenuti.

Morbi fermentum amet

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.

Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.

Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<section class="section section-primary" aria-labelledby="titleEx3">
  <div class="section-content">
    <!-- contenuto di esempio START -->
    <div class="container white-color">
      <div class="row mb-3">
        <div class="col-12">
          <h2 id="titleEx3">Morbi fermentum amet</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
        </div>
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</p>
        </div>
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</p>
        </div>
      </div>
    </div>
    <!-- contenuto di esempio END -->
  </div>
</section>

Sfondo in evidenza

Aggiungendo la classe .section-emphasis si otterrà un sfondo di colore in evidenza. Si consiglia di applicare la classe .white-color al contenuto (come da esempio) per garantire la leggibilità dei testi contenuti.

Morbi fermentum amet

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.

Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.

Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<section class="section section-neutral" aria-labelledby="titleEx4">
  <div class="section-content">
    <!-- contenuto di esempio START -->
    <div class="container white-color">
      <div class="row mb-3">
        <div class="col-12">
          <h2 id="titleEx4">Morbi fermentum amet</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
        </div>
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</p>
        </div>
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</p>
        </div>
      </div>
    </div>
    <!-- contenuto di esempio END -->
  </div>
</section>

Immagine di sfondo

Aggiungendo la classe .section-image alla section e indicando attraverso CSS in linea l’URL dell’immagine da utilizzare (es: style="background-image: url('URL-IMMAGINE')") la Section utilizzerà l’immagine indicata come sfondo, adattandone automaticamente le dimensioni per coprire l’intera Section.

A seconda della luminosità dell’immagine si consiglia di applicare la classe .white-color al contenuto (come da esempio) per garantire il corretto contrasto fra testi e sfondo.

Morbi fermentum amet

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.

Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.

Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<section class="section section-image" style="background-image: url('https://picsum.photos/1280/720?image=811')"  aria-labelledby="titleEx5">
  <div class="section-content">
    <!-- contenuto di esempio START -->
    <div class="container white-color">
      <div class="row mb-3">
        <div class="col-12">
          <h2 id="titleEx5">Morbi fermentum amet</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
        </div>
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</p>
        </div>
        <div class="col-12 col-lg-6 col-xl-4">
          <p>Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</p>
        </div>
      </div>
    </div>
    <!-- contenuto di esempio END -->
  </div>
</section>

Section con Card

Per aggiungere una serie di card all’interno di una Section si consiglia di utilizzare le griglie per garantire un corretto margine fra gli elementi .card.

Morbi fermentum amet

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et.

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<section class="section section-muted"  aria-labelledby="titleEx6">
  <div class="section-content">
    <!-- contenuto di esempio START -->
    <div class="container">
      <div class="row">
        <div class="col">
          <h2 class="mb-4 " id="titleEx6">Morbi fermentum amet</h2>
        </div>
      </div>
      <div class="row gy-3">
        <div class="col-12 col-md-6">
          <div class="card shadow">
            <div class="card-body">
              <p class="card-text font-serif">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. </p>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="card shadow">
            <div class="card-body">
              <p class="card-text font-serif">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- contenuto di esempio END -->
  </div>
</section>