10 trucs et astuces pour Bootstrap 4

10 trucs et astuces pour Bootstrap 4

Bootstrap est le framework le plus utilisé au monde pour concevoir et créer des sites Web responsive design. Pour vous aider à tirer parti de ses nombreuses possibilités, je vous présente mes trucs et des astuces qui vous faciliteront son usage.

Au fil des années, le framework Bootstrap s'est enrichi de fonctionnalités toujours plus nombreuses. Revers de la médaille, c'est peut-être aussi cette richesse qui peut rebuter de nombreux utilisateurs. Il n'est tout simplement pas possible de mémoriser toutes les fonctions et personne ne prendra une semaine de congé pour étudier et apprendre sa documentation. Et même après plusieurs années de pratique quotidienne, je m'étonne encore de découvrir certaines possibilités offertes par ce puissant framework.

A force de stocker certains trucs et astuces dont j'avais pu avoir besoin pour certains projets, j'ai décidé de les rassembler dans un article afin de pouvoir les partager avec vous. Pour vous simplifier la rechercher et la lecture, ces trucs et astuces ont été regroupés en quatre grandes catégories.

Table des matières


1. La grille de Bootstrap

1.1 Avoir des colonnes de la même hauteur

C'est un problème récurrent pour qui souhaite soigner visuellement l'affichage de plusieurs colonnes ayant des contenus de longueur différentes. Pour contourner proprement cette difficulté, nous allons utiliser flexbox.

Voici le code CSS qu'il convient d'utiliser pour cela :

.row-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

[class*="col-"] {
  margin-bottom: 30px;
}

.content {
  height: 100%;
}

Voyons maintenant le rendu :

Première colonne

Il y a beaucoup de contenu par ici

Il y a beaucoup de contenu par ici

Deuxième colonne

Il y a un peu de contenu par ici

Troisième colonne

Il y a un peu de contenu par ici

Quatrième colonne

Il y a un peu de contenu par ici

Cinquième colonne

Il y a beaucoup de contenu par ici

Il y a beaucoup de contenu par ici

Il y a beaucoup de contenu par ici

Sixième colonne

Il y a un peu de contenu par ici


1.2 Affichage sur 5 colonnes

La grille Bootstrap est construite sur la base de 12 colonnes, donc un nombre pair. Si l'affichage sur 3, 7, 9 et 11 colonnes ne posait aucun souci, l'affichage sur 5 colonnes était un vrai casse-tête jusqu'à l'arrivée de Bootstrap 4x. qui permet cela maintenant grâce à cette syntaxe native :

<div class="row">
   <div class="col">
      Première colonne
   </div>
   <div class="col">
      Deuxième colonne
   </div>
   <div class="col">
      Troisième colonne
   </div>
   <div class="col">
      Quatrième colonne
   </div>
   <div class="col">
      Cinquième colonne
   </div>
</div>

Ce qui nous donne :

Première colonne
Deuxième colonne
Troisième colonne
Quatrième colonne
Cinquième colonne

2. Mise en page et typographie

2.1 Centrer verticalement

Il existe plusieurs moyens de devenir fou et vouloir centrer verticalement un élément avec du CSS permet d'y arriver très rapidement. Heureusement, Bootstrap 4 nous évite cela aujourd'hui avec deux approches différentes mais toutes aussi efficaces l'une que l'autre.

En utilisant la propriété align-self-center de cette manière :

<div class="row">
           <div class="col-6 align-self-center">
                <div> 
                    Je suis centré verticalement
                </div>
           </div>
           <div class="col-6 align-self-center">
                <div> 
                    et moi aussi !
                </div>
           </div>
</div>

Ce qui nous donne :

Je suis centré verticalement
et moi aussi !

Pour obtenir ce centrage, vous pouvez également utiliser les propriétés suivantes display:table, display:table-cell et display:inline. Dans ce cas, votre code serait le suivant :

<div class="row">
    <div class="col-sm-12 d-table">
        <div class="d-table-cell align-middle p-5 m-2 bg-primary text-white">
            Je suis centré verticalement
        </div>
    </div>
</div>

Voici le rendu obtenu :

Je suis centré verticalement

2.2 Choisir le ratio d'affichage des vidéos

Bootstrap 4 apporte quatre ratios différents pour l'affichage des vidéos : 4:3, 16:9, 21:9 et 1:1.
Cela se traduit par quatre classes différentes

<!-- Ratio 21:9 -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- Ratio 16:9 -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- Ratio 4:3 -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- Ratio 1:1 -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Voici ce que cela donne avec deux ratios différents :

Ratio 16:9

Ratio 4:3

2.3 Jouer avec les classes de titres

Vous avez de jouer avec l'affichage des balises de titre. Par exemple, si vous souhaitez donner à une balise H2 l'apparence d'une balise h4, ajoutez simplement la classe .h4 à votre balise h2.

<h2 class="h4">
  Ce titre ressemble à un h4 alors que c'est un h2 !
</h2>  

Ce titre ressemble à un h4 alors que c'est un h2 !

2.4 Aligner le bouton au champ de saisie

Il existe plusieurs solutions natives dans Bootstrap 4 pour faire ceci (je pense à la classe .input-group par exemple).

Mais si vous souhaitez y parvenir d'une manière plus classique, vous pouvez le faire comme ceci :

le style CSS

.input-container-inline {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle; 
}

le marquage HTML

<div class="container">
<div class="form-group input-container-inline">
  <input class="form-control">
</div>
<button type="submit" class="btn btn-default">Submit</button>

Ce qui donne :


3. Navbar et footer

3.1 Changer la hauteur de la barre de navigation

Lorsque l'on souhaite changer la hauteur de la barre de navigation, cela implique un peu plus qu'ajouter une nouvelle valeur à .navbar surtout si l'on cherche à faire les choses proprement.

Voici le code CSS que je vous propose agrémenté de quelques commentaires :

.navbar {
  min-height: 80px;
}

.navbar-brand {
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
}

.navbar-toggle {
  /* (80px - hauteur du bouton 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* (80px - hauteur de la ligne 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

3.2 Avoir un footer sticky

Avoir un footer sticky permet de garder un élément de la page toujours visible lors du scroll. C'est surtout appréciable sur mobile lorsque l'on cherche à afficher un numéro de téléphone ou un bouton d'appel à action.
La marche à suivre pour avoir un footer sticky est assez simple :

  • Créer un élément dans le footer avec les règles suivantes position: absolute et Bottom: 0
  • Indiquer une hauteur fixe grâce à la propriété height. Dans cet exemple, ce sera 80px.
  • Ajouter un padding-bottom de la même valeur (80px) à votre élément <body>

Voici à quoi devra ressembler votre feuille de style :

body {
  height: 100%;
  padding-bottom: 80px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
}

4. Les boutons

4.1 Créer ses propres boutons Bootstrap

Si Bootstrap 3 proposait 5 boutons, la dernière version du framework en propose 9, soit presque le double. En plus des différentes size, ont également été rajoutés les styles .outline. Bref, il y en a pour tous les goûts !

Pour avoir un bouton Bootstrap qui soit adapté à ses couleurs et à sa charte graphique, la solution la plus évidente est de surcharger la classe .btn.

Au lieu de ça, je vous propose de créer un tout nouveau bouton au nom évocateur : océan. Dans les CSS, nous lui donnons les valeurs par défaut mais également :active, :focus et :hover.

Pour l'appeler, il vous suffira alors de saisir <button type="button" class="btn btn-ocean">Mon nouveau bouton</button>

.btn-ocean {
  color: #fff;
  background-color: #004E64;
  border-color: #004E64;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 0;
}

.btn-ocean:hover,
.btn-ocean:active,
.btn-ocean:focus,
.btn-ocean.active {
  /* Assombrissons #004E64 au survol */
  background: #003D4F;
  color: #ffffff;
  border-color: #003D4F;
}

4.2 Désactiver les boutons et les éléments des formulaires

Vous ne le savez peut-être pas mais Bootstrap vous permet de désactiver certains éléments tels que les boutons ou les cases à cocher des formulaires. Dans ce cas et pour les différencier, l'affichage de ces éléments est légèrement différent.

Pour désactiver les boutons radios et les cases à cocher :

  • Ajouter la classe .disabled à l'élément parent d'un .checkbox ou .radio
  • Ajouter l'attribut disabled dans la balise input
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
     Cette case à cocher est désactivée
  </label>
</div>

<div class="radio disabled">
  <label>
    <input type="radio" name="Radios" id="Radios" value="option" disabled>
     Ce bouton radio est désactivé
  </label>
</div>

Pour désactiver les boutons

  • Ajouter l'attribut disabled au <button>
  • ou ajouter la classe .disabled au bouton de type <a>
<button type="button" class="btn btn-primary" disabled="disabled">Bouton désactivé</button>
<a href="#" class="btn btn-primary disabled" role="button">Lien bouton désactivé</a>

En conclusion

J'espère que le contenu de cet article vous a permis de découvrir certains aspects de Bootstrap qui vous seront utiles pour améliorer votre site web. N'hésitez pas à partager les astuces que vous pourriez connaitre et qui vous simplifient la vie.

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.