Per suddividere una pagina in blocchi orizzontali con sfondi differenti utilizzare più elementi <div> con classe .section.
Il componente Section ha un padding verticale ed orizzontale predefinito ed uno sfondo trasparente.
Il contenuto di una Section va inserito nel <div> con classe .section-content. Questo elemento occupa tutta la larghezza della Section (meno il padding) ma, nel caso ne venisse definita la max-width in CSS, verrà automaticamente centrato orizzontalmente all’interno della Section.
Esempio
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.
<div class="section">
<div class="section-content">
<!-- contenuto di esempio START -->
<div class="container">
<div class="row mb-3">
<div class="col-12">
<h4>Morbi fermentum amet</h4>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6 col-xl-4 pr-0 pr-md-5 mb-3">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.</div>
<div class="col-12 col-lg-6 col-xl-4 pr-0 pr-md-5 mb-3">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>
<div class="col-12 col-lg-6 col-xl-4 pr-0 pr-md-5">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>
</div>
</div>
<!-- contenuto di esempio END -->
</div>
</div>
Sfondo
Il componente Section ha, per default, uno sfondo trasparente. Aggiungendo le classi sottoelencate è possbile aggiungere colori di sfondo.
Aggiungendo la classe .section-primary si otterrà un sfondo del colore primario.
Utilizzando invece la classe .section-neutral si otterrà un sfondo del colore secondario.
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.
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.
<div class="section section-primary">
<div class="section-content">
<!-- contenuto di esempio START -->
<div class="container white-color">
<div class="row mb-3">
<div class="col-12">
<h4>Morbi fermentum amet</h4>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6 col-xl-4 pr-0 pr-md-5 mb-3">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.</div>
<div class="col-12 col-lg-6 col-xl-4 pr-0 pr-md-5 mb-3">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>
<div class="col-12 col-lg-6 col-xl-4 pr-0 pr-md-5">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>
</div>
</div>
<!-- contenuto di esempio END -->
</div>
</div>
<div class="section section-neutral">
<div class="section-content">
<!-- contenuto di esempio START -->
<div class="container white-color">
<div class="row mb-3">
<div class="col-12">
<h4>Morbi fermentum amet</h4>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6 col-xl-4 pr-0 pr-md-5 mb-3">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.</div>
<div class="col-12 col-lg-6 col-xl-4 pr-0 pr-md-5 mb-3">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>
<div class="col-12 col-lg-6 col-xl-4 pr-0 pr-md-5">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>
</div>
</div>
<!-- contenuto di esempio END -->
</div>
</div>
