SECTION :
Section avec largeur contenu normal : class container + my-5 (margin top+bottom de 5)
Div intérieure avec
- background marron : class bg-brown
- widht 100% : class w-100
- padding de tous les côtés à 5 : class p-5
- Texte en blanc : class text-white
Colonne avec :
- div parente : class row (nouvelle ligne) + g-5 (gap de 5 entre les 2 colonnes)
- div de la colonne : col-lg-8 (2 tiers)
- div du contenu de la colonne : p-3 (padding prtout de 3) + bg-red
Ces 2 colonnes seront en 2/3 - 1/3 à partir de 992px sinon en dessous à 100%
Colonne avec :
- div de la colonne : col-md-4 (1 tiers)
- div du contenu de la colonne : bg-yellow + padding 5 (p-5)
Texte centré : class text-center + margin top et bottom de 4 : my-4
Les grilles sont divisées en 12 parties, donc 6 = moitié, 4 = tiers, 3 = quart ..
Breakpoints : sm: 576px /md: 768px / lg: 992px / xl: 1200px
Lien vers système de colonnes : https://getbootstrap.com/docs/5.0/layout/grid/
La div qui contient les 3 boutons a les classes : d-flex + justify-content-between (distribuer les items de la div sur toute la largeur)
La div qui contient les 3 boutons a les classes : d-flex +gap-3 (espace de séparation des items )
La div qui contient les 3 boutons a les classes : d-flex +gap-1 + flex-column (alignement vertical) + align-items-center (alignement au centre)
Lien vers affichage FLEX : https://getbootstrap.com/docs/5.0/utilities/flex/
Bloc 2 colonnes txt + image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra nec erat ac rutrum. Praesent non egestas augue. Pellentesque augue erat, aliquet at efficitur id, dictum vitae quam.In tristique lorem metus, ut pulvinar mi lobortis in.
Curabitur malesuada augue quis tincidunt volutpat. In hac habitasse platea dictumst. Curabitur tempus leo eu ipsum rhoncus, non pretium dui vehicula.Mauris urna ipsum, pulvinar sed lectus sed, commodo egestas ligula.
Ut imperdiet placerat lacus sit amet scelerisque. Donec eget urna vel magna vehicula tincidunt eget sed dolor.
Bloc 2 colonnes image 1/2 + txt 1/2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra nec erat ac rutrum. Praesent non egestas augue. Pellentesque augue erat, aliquet at efficitur id, dictum vitae quam.In tristique lorem metus, ut pulvinar mi lobortis in.
Curabitur malesuada augue quis tincidunt volutpat. In hac habitasse platea dictumst. Curabitur tempus leo eu ipsum rhoncus, non pretium dui vehicula.Mauris urna ipsum, pulvinar sed lectus sed, commodo egestas ligula.
Ut imperdiet placerat lacus sit amet scelerisque. Donec eget urna vel magna vehicula tincidunt eget sed dolor.
Bloc 2 colonnes 1/3 txt + 2/3 image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra nec erat ac rutrum. Praesent non egestas augue. Pellentesque augue erat, aliquet at efficitur id, dictum vitae quam.In tristique lorem metus, ut pulvinar mi lobortis in.
Curabitur malesuada augue quis tincidunt volutpat. In hac habitasse platea dictumst. Curabitur tempus leo eu ipsum rhoncus, non pretium dui vehicula.Mauris urna ipsum, pulvinar sed lectus sed, commodo egestas ligula.
Ut imperdiet placerat lacus sit amet scelerisque. Donec eget urna vel magna vehicula tincidunt eget sed dolor.
Bloc 2 colonnes 2/3 txt + 1/3 image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra nec erat ac rutrum. Praesent non egestas augue. Pellentesque augue erat, aliquet at efficitur id, dictum vitae quam.In tristique lorem metus, ut pulvinar mi lobortis in.
Curabitur malesuada augue quis tincidunt volutpat. In hac habitasse platea dictumst. Curabitur tempus leo eu ipsum rhoncus, non pretium dui vehicula.Mauris urna ipsum, pulvinar sed lectus sed, commodo egestas ligula.
Ut imperdiet placerat lacus sit amet scelerisque. Donec eget urna vel magna vehicula tincidunt eget sed dolor.
Bloc 2 colonnes 1/4 img + 3/4 txt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra nec erat ac rutrum. Praesent non egestas augue. Pellentesque augue erat, aliquet at efficitur id, dictum vitae quam.In tristique lorem metus, ut pulvinar mi lobortis in.
Curabitur malesuada augue quis tincidunt volutpat. In hac habitasse platea dictumst. Curabitur tempus leo eu ipsum rhoncus, non pretium dui vehicula.Mauris urna ipsum, pulvinar sed lectus sed, commodo egestas ligula.
Ut imperdiet placerat lacus sit amet scelerisque. Donec eget urna vel magna vehicula tincidunt eget sed dolor.
Bloc 3 colonnes 1/3 txt + 1/3 img + 1/3 txt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra nec erat ac rutrum. Praesent non egestas augue. Pellentesque augue erat, aliquet at efficitur id, dictum vitae quam.In tristique lorem metus, ut pulvinar mi lobortis in.
Curabitur malesuada augue quis tincidunt volutpat. In hac habitasse platea dictumst. Curabitur tempus leo eu ipsum rhoncus, non pretium dui vehicula.Mauris urna ipsum, pulvinar sed lectus sed, commodo egestas ligula.
Ut imperdiet placerat lacus sit amet scelerisque. Donec eget urna vel magna vehicula tincidunt eget sed dolor.
Bloc 3 colonnes 1/3 txt + 1/3 img + 1/3 txt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra nec erat ac rutrum. Praesent non egestas augue. Pellentesque augue erat, aliquet at efficitur id, dictum vitae quam.In tristique lorem metus, ut pulvinar mi lobortis in.
Curabitur malesuada augue quis tincidunt volutpat. In hac habitasse platea dictumst. Curabitur tempus leo eu ipsum rhoncus, non pretium dui vehicula.Mauris urna ipsum, pulvinar sed lectus sed, commodo egestas ligula.
Ut imperdiet placerat lacus sit amet scelerisque. Donec eget urna vel magna vehicula tincidunt eget sed dolor.
Sous titre
col-md-6 et col-xl-3, donc mobile 1 colonne, dès 768px 2 colonnes, dès 1200px 4 colonnes
Sous titre
col-md-6 et col-xl-3, donc mobile 1 colonne, dès 768px 2 colonnes, dès 1200px 4 colonnes
Sous titre
col-md-6 et col-xl-3, donc mobile 1 colonne, dès 768px 2 colonnes, dès 1200px 4 colonnes
Sous titre
col-md-6 et col-xl-3, donc mobile 1 colonne, dès 768px 2 colonnes, dès 1200px 4 colonnes