Chaque contenu (page de base, news, landing page... mais aussi blocs et paragraphes) possède un champs "Classe(s) CSS" qui sert à modifier certains paramètres d'affichage comme la couleur de fond ou les marges de l'élément considéré.

Classes importantes

Deux types de mise en page coexistent, le gabarit type "Pages de base" et le gabarit de type "Landing page".

Le type de gabarit "Page de base" possède une colonne à gauche et les blocs ajoutés sont contraints à une largeur maximale, la classe appliquées est container.

Le gabarit "Landing page" permet aux blocs d'occuper toute la largeur du navigateur, la classe appliquées est container-fluid.

Vous pouvez ajouter ces classes dans le champs "Classe(s) CSS" pour contraindre un bloc à une largeur de "Page de base" en ajoutant la classe container.

Voir les exemples sur la page de démo avancée.

Classes pour gérer les marges (intérieures et extérieures)

Les marges intérieures (padding) et extérieures (margin) peuvent recevoir 6 valeurs, de 0, aucune à 5, espace important.

Les classes existantes sont nommées selon le shema suivant :

{property}{sides}-{size}

  • property est p pour padding ou m pour margin
  • sides, t pour top, b pour bottom, l pour left et r pour right, y pour les marges verticales et x pour les marges horizontales
  • size de 0 à 5

Par exemple pour appliquer une marge verticale importante à un bloc paragraphe ajouter la classe my-4 au champs Classe(s) CSS

 

Bloc de classe p-4

 

Bloc de classe py-4

 

Bloc de classe pb-4

 

Bloc de classe m-4

 

Bloc de classe my-4

 

Bloc de classe mb-4

 

Mélanger plusieurs classes ouvre d'importantes possibilités graphiques

Mélange de classes

Ici, une imbrication de 3 éléments. Le premier possède les classes shadow bg-info p-2,
- le second, enfant du premier, les classes p-3 bg-light
- et enfin, l'élément contenant le texte et enfant du second possède les classes p-3 bg-light text-info display-4

div class="shadow bg-info p-2"
  |
  |__ div class="p-3 bg-light"
        |
        |__ div class="p-3 bg-light text-info display-4"

 

Classes de couleur de fond ou de texte

Les couleurs de la chartes étant déterminée, il est essentiel d'utiliser ces classes pour appliquer une couleur sur un fond (bg-{couleur}) ou un text (text-{couleur})

Les couleurs disponibles en classes sont :

  • text-primary Exemple de texte dans un LI de classe pb-3
  • text-secondary Exemple de texte dans un LI de classe pb-3
  • text-success Exemple de texte dans un LI de classe pb-3
  • text-danger Exemple de texte dans un LI de classe pb-3
  • text-warning Exemple de texte dans un LI de classe pb-3
  • text-info Exemple de texte dans un LI de classe pb-3
  • text-light Exemple de texte dans un LI de classe pb-3 bg-dark
  • text-dark Exemple de texte dans un LI de classe pb-3
  • text-white Exemple de texte dans un LI de classe pb-3 bg-dark

 

Classes de bordure et d'ombrage et arrondi

Sur le même principe, les classes border affichent une bordure que l'on peut coloriser grâce aux classes de couleurs ci-dessus. Il est également possible de n'afficher une bordure que sur un ou deux voire trois côtés.

Classes : border ou plus spécifiquement border-top, border-bottom, border-left, border-right

Ceci est un block <div> possédant les classes border border-danger p-5 m-5

Pour ajouter une ombre portée, il faut lui appliquer la classe shadow

Ceci est un block <div> possédant les classes border border-primary bg-light shadow p-5 m-5

 

Affichage / masquage de contenu

Texte de déclenchement possédant la classe "trigger-div"

Texte ou élement à masquer possédant la classe "content-div"

Texte de déclenchement possédant la classe "trigger-div"

Texte ou élement à masquer possédant la classe "content-div"