10 trucs et astuces pour Bootstrap

Au fil des versions, Bootstrap s'est enrichi de nouvelles fonctionnalités toujours plus puissantes. Revers de la médaille, c'est peut-être aussi cette richesse qui peut rebuter certains utilisateurs. Il n'est tout simplement pas possible de mémoriser toutes les fonctions et personne ne prendra des semaines de congé pour étudier et mémoriser 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 des bouts de code dont j'ai eu besoin pour certains projets, j'ai décidé de rassembler dans un article mes 10 trucs et astuces pour Bootstrap afin de pouvoir les partager avec vous. Pour vous simplifier la recherche et la lecture, ces trucs et astuces ont été regroupés en quatre grandes catégories.

trucs et astuces pour Bootstrap

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 :

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 pose aucun souci, l'affichage sur 5 colonnes est un vrai casse-tête jusqu'à l'arrivée de Bootstrap 4x. qui permet cela 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 :

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 :

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 :

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 :

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 H4 l'apparence d'une balise h2, ajoutez simplement la classe fs-4 à votre balise h4.

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

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

2.4 Aligner le bouton au champ de saisie

Il existe plusieurs solutions natives dans Bootstrap 4 et 5 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 {
	position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%; 
}

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, les dernières versions du framework en proposent 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 trucs et astuces de Bootstrap qui vous seront utiles pour améliorer votre site web. N'hésitez pas à partager les trouvailles que vous pourriez connaitre et qui vous simplifient la vie.

trucs et astuces pour Bootstrap