Dans Joomla, les classes Bootstrap peuvent structurer des colonnes, régler les espacements et mettre en valeur des boutons sans créer une règle CSS pour chaque bloc. Leur disponibilité dépend toutefois du template actif, qui détermine les ressources chargées sur le site.
Pour configurer ces styles sans fragiliser la maintenance, il faut distinguer les classes prêtes à l’emploi des personnalisations propres au projet. Les exemples ci-dessous s’appuient sur Cassiopeia et montrent comment vérifier l’intégration avant de modifier les pages.
A retenir :
- Compatibilité Bootstrap à vérifier selon le template Joomla actif
- Classes responsive pour des colonnes adaptées aux petits écrans
- Personnalisation CSS légère dans le fichier user.css de Cassiopeia
- Comportements interactifs dépendants des ressources JavaScript nécessaires
Configurer Bootstrap dans Joomla selon le template
Cette vérification évite de chercher une erreur dans le contenu quand le véritable problème vient du template ou de ses ressources. Dans les versions de Cassiopeia visées ici, les classes Bootstrap 5 servent notamment à la grille, aux espacements et aux boutons.
Vérifier la disponibilité des classes Bootstrap
Selon la documentation technique du projet Joomla, une dépendance Bootstrap est déclarée pour les versions 5.4.8 et 6.1.3, mais cela ne garantit pas un rendu identique avec chaque template. La source de Cassiopeia visée importe les éléments SCSS Bootstrap, tandis qu’un template tiers peut charger un autre framework ou seulement certaines règles.
Avant de modifier une page, identifiez le template affecté au menu concerné, puis examinez le rendu dans le navigateur. Si une classe reste sans effet, vérifiez le HTML final et les filtres de l’éditeur avant d’ajouter une seconde feuille Bootstrap.
Vérifications avant toute modification :
- Nom du template actif sur la page concernée
- Présence des classes attendues dans le HTML rendu
- Absence de feuilles CSS concurrentes ou dupliquées
- Compatibilité des extensions et des styles de modules
Choisir la bonne couche de personnalisation
Quand Bootstrap fournit déjà la mise en forme nécessaire, ses classes évitent souvent de multiplier les règles propres au site. Pour une petite bordure réutilisable dans Cassiopeia, le fichier user.css permet d’ajouter une classe dédiée sans modifier les fichiers livrés avec le template.
Selon le guide de personnalisation de Cassiopeia, les modifications simples peuvent être isolées dans user.css, alors qu’un changement de structure peut justifier une surcharge. Un template enfant convient à des adaptations plus larges, mais ses fichiers personnalisés doivent rester compatibles avec les évolutions du template parent.
| Besoin | Couche adaptée | Point de vigilance |
|---|---|---|
| Espacement courant | Classe Bootstrap | Vérifier son rendu dans le template |
| Bordure propre au site | user.css | Conserver un sélecteur explicite |
| Structure répétée de module | Surcharge de sortie | Contrôler le HTML généré |
| Évolution importante du template | Template enfant | Revoir les fichiers après mise à jour |
Construire une mise en page responsive avec Bootstrap
Une fois la compatibilité confirmée, la grille permet d’organiser le contenu sans imposer la même disposition à tous les écrans. Selon la documentation officielle Bootstrap 5.3, le système repose sur douze colonnes et des points de rupture définis par une largeur minimale.
Régler les colonnes selon les écrans
Commencez par définir la présentation sur petit écran, puis ajoutez une classe préfixée lorsque la disposition doit changer. Ainsi, une colonne col-12 col-md-6 occupe toute la largeur au départ, puis la moitié de la rangée à partir du seuil md.
Les colonnes doivent être placées dans une rangée row, qui gère leur alignement et leur retour à la ligne. Pour une équipe éditoriale, ce choix garde l’ordre de lecture logique, même lorsque les blocs se répartissent ensuite côte à côte.
Repères des points de rupture Bootstrap :
| Préfixe | Largeur minimale | Usage courant |
|---|---|---|
| Sans préfixe | Écrans les plus étroits | Disposition de base |
| sm | 576 px | Petits écrans élargis |
| md | 768 px | Disposition en deux colonnes |
| lg | 992 px | Contenu sur écran large |
| xl et xxl | 1 200 px et 1 400 px | Réglages pour grandes fenêtres |
Maîtriser les espacements et les boutons
Les classes p-4, mb-3 et g-4 règlent respectivement le remplissage intérieur, la marge basse et l’espace entre colonnes. La documentation Bootstrap recommande aussi des variantes responsives, comme mb-md-0, pour ajuster un espacement à partir d’un seuil donné.
Pour un lien d’action, associez btn à une variante comme btn-primary; pour une action dans la page, préférez un élément bouton. Les classes d’apparence ne remplacent ni un libellé compréhensible ni la vérification du contraste sur les couleurs réelles du site.
Adapter les modules et diagnostiquer les problèmes
Après les articles et leurs colonnes, les modules demandent une vérification supplémentaire, car Joomla ajoute un conteneur autour de leur contenu. Ce cadre explique pourquoi une même classe peut produire un résultat différent selon le style de module sélectionné.
Appliquer les classes aux modules Joomla
Le champ Module Class ajoute des classes au conteneur du module, tandis que le style du module contrôle son habillage général. Selon la documentation Joomla sur les styles de modules, Cassiopeia propose plusieurs habillages; il faut donc inspecter l’élément réellement ciblé avant d’ajouter padding ou marge.
Un module de promotion peut recevoir p-4 et mb-4, mais une marge déjà fournie par son habillage risque de doubler l’espacement. L’inspection du HTML permet de repérer les enveloppes ajoutées et de corriger la classe au bon niveau.
Contrôles après application des classes :
- Élément exact auquel le champ Module Class ajoute les classes
- Habillage et conteneurs produits par le style du module
- Espacements déjà présents dans le template ou ses surcharges
- Lisibilité sur mobile, tablette et grand écran
Distinguer les styles CSS des composants interactifs
Une grille, un espacement ou l’apparence d’un bouton reposent sur CSS et n’exigent pas, à eux seuls, le comportement JavaScript de Bootstrap. À l’inverse, une fenêtre modale, un onglet ou un panneau repliable nécessite le script adapté, que Joomla ne charge pas nécessairement sur chaque page.
Si une modale ne répond pas, ajouter davantage de classes CSS ne résoudra pas l’absence du comportement nécessaire. Vérifiez les ressources fournies par le template ou l’extension responsable, puis testez clavier, ordre de lecture et visibilité du focus.
Pour une personnalisation durable, évitez de modifier directement les fichiers fournis avec Cassiopeia, car ces changements peuvent disparaître lors d’une mise à jour. Les classes Bootstrap structurent le rendu, mais l’accessibilité dépend aussi du HTML, du contraste et de tests sur les appareils utilisés.
Source : Joomla! Project, « Cassiopeia Customisation » ; Joomla! Project, « Module Styles » ; Bootstrap Team, « Grid system · Bootstrap v5.3 ».