Skip to content

2025 01 10 Bootstrap 5 Components

Bootstrap 5 est le compagnon idéal des thèmes Jekyll. Dans cet article, nous explorerons les composants Bootstrap les plus utiles pour créer des sites Jekyll modernes et responsives.

L'avantage de Bootstrap 5

Bootstrap 5 apporte plusieurs améliorations :

  • Aucune dépendance à jQuery : JavaScript vanilla pur
  • Système de grille amélioré : de meilleurs utilitaires responsives
  • Formulaires enrichis : des contrôles de formulaire plus accessibles
  • Nouvelle API d'utilitaires : personnalisez facilement les utilitaires
  • Prise en charge RTL : support des langues de droite à gauche

Composants essentiels pour Jekyll

La barre de navigation Bootstrap est parfaite pour les sites Jekyll :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="/">{{ site.title }}</a>
    <button
      class="navbar-toggler"
      data-bs-toggle="collapse"
      data-bs-target="#nav"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
      <!-- Navigation items -->
    </div>
  </div>
</nav>

Cartes pour le contenu

Les cartes sont des conteneurs polyvalents pour les articles de blog :

<div class="card h-100">
  <img src="{{ post.preview }}" class="card-img-top" />
  <div class="card-body">
    <h5 class="card-title">{{ post.title }}</h5>
    <p class="card-text">{{ post.excerpt }}</p>
  </div>
</div>

Utilitaires responsives

Les utilitaires responsives de Bootstrap facilitent la conception mobile-first :

  • d-none d-lg-block - Masquer sur mobile, afficher sur les grands écrans
  • col-12 col-md-6 col-lg-4 - Largeurs de colonnes responsives
  • text-center text-md-start - Alignement de texte responsive

Commencez dès aujourd'hui à créer de superbes sites Jekyll avec Bootstrap 5 !