---
title: 'Créer un blog avec Symfony 6 - 03 - Création du template de base avec Bootstrap 5'
description: 'Le squelette Twig du blog : héritage et blocs dans base.html.twig, Bootstrap 5.3 en CDN ou par importmap, et la gestion des assets avec asset() et path().'
pubDate: 2022-03-17
updatedDate: 2026-10-04
family: 'php-symfony'
tags: []
heroImage: '/images/creer-un-blog-avec-symfony-6-03-creation-du-template-de-base-avec-bootstrap-5.webp'
videoUrl: 'https://www.youtube.com/watch?v=s-conqNRuiw'
faq:
  - question: 'Comment inclure Bootstrap 5 dans un projet Symfony ?'
    answer: "Deux voies : le CDN, avec la feuille de style dans le head et le bundle JavaScript avec Popper avant la fermeture du body, ou l'importmap avec php bin/console importmap:require bootstrap quand le projet utilise AssetMapper."
  - question: 'AssetMapper ou Webpack Encore pour les assets ?'
    answer: 'AssetMapper est le défaut des nouveaux projets créés avec symfony new --webapp : il tourne en PHP, sans étape de build. Webpack Encore reste documenté et fonctionnel, mais il est en mode maintenance.'
  - question: 'Quels blocs Twig faut-il prévoir dans le template de base ?'
    answer: "Le squelette fourni par le recipe Twig définit title, stylesheets, javascripts et body. C'est le socle : chaque template enfant ne redéfinit que ce dont il a besoin."
  - question: 'Comment fonctionne l’héritage de templates en Twig ?'
    answer: 'Le template enfant commence par extends, puis redéfinit des blocs avec block. Un bloc non redéfini garde le contenu du parent, et la fonction parent() permet de réutiliser ce contenu dans un bloc surchargé.'
  - question: 'Bootstrap 5 a-t-il besoin de jQuery ?'
    answer: "Non, et la documentation d'introduction de Bootstrap 5.3 ne le mentionne pas : depuis la version 5, les composants JavaScript ne dépendent plus de jQuery."
---

Avant les articles, avant les contrôleurs, il y a le squelette HTML. Cet épisode met en place le template de base du blog : un fichier `base.html.twig` que tous les autres étendent, et Bootstrap 5 pour la mise en forme.

La série a été enregistrée sur Symfony 6. Le rendu Twig n'a pas changé, mais la gestion des assets, elle, a évolué : c'est le point à mettre à jour en reprenant cet épisode.

## Le squelette fourni par Symfony

Le recipe Flex du `twig-bundle` crée déjà un `templates/base.html.twig` avec les blocs attendus :

```
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}Mon blog{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>
```

Les quatre blocs — `title`, `stylesheets`, `body`, `javascripts` — couvrent tout ce dont un site a besoin. Tu les ajoutes ou les déplaces, mais l'idée reste : le parent porte la structure, l'enfant apporte le contenu.

Deux détails de Bootstrap sont déjà respectés dans ce squelette, et il ne faut pas les perdre : le doctype HTML5 et la balise `meta viewport`. Sans elle, le rendu mobile est dézoomé et les composants responsive ne se déclenchent pas comme prévu.

## L'héritage Twig

Un template enfant commence toujours par `extends`, qui doit être la première balise du fichier :

```
{% extends 'base.html.twig' %}

{% block title %}{{ article.title }} - Mon blog{% endblock %}

{% block body %}
    <h2>{{ article.title }}</h2>
    <p>{{ article.content }}</p>
{% endblock %}
```

Trois règles à retenir. Un bloc non redéfini conserve le contenu du parent. Twig ne gère pas l'héritage multiple : un seul `extends` par rendu, et c'est le tag `use` qui permet de réutiliser horizontalement. Et la fonction `parent()` donne accès au contenu du bloc parent depuis l'enfant, ce qui évite de recopier le titre par défaut quand on veut simplement l'enrichir.

Pour un fragment réutilisable — une carte d'article sur la page d'accueil et sur la page de liste — c'est `include` qu'il faut utiliser, avec son propre contexte.

## Brancher Bootstrap 5

La majeure courante de Bootstrap est la v5, dans sa version de correctif 5.3.x. Par CDN, la feuille de style va dans le bloc `stylesheets` et le bundle JavaScript, qui embarque Popper, dans `javascripts` — c'est-à-dire avant la fermeture du `body`, pour ne pas bloquer le rendu.

Le HTML de Bootstrap est pensé pour le mobile d'abord : les classes s'appliquent au petit écran, et les variantes `sm`, `md`, `lg` montent en puissance. Rien à configurer, c'est la convention de nommage qui porte la logique.

## Les assets

Deux fonctions Twig font le travail au quotidien. `asset()` génère l'URL d'un fichier statique, en gérant le versioning et la portabilité si le site est déployé dans un sous-répertoire :

```
<link rel="stylesheet" href="{{ asset('css/blog.css') }}">
```

`path()` génère une URL à partir du nom d'une route, ce qui évite de coder les chemins en dur :

```
<a href="{{ path('blog_show', { slug: article.slug }) }}">{{ article.title }}</a>
```

## AssetMapper ou Encore ?

C'est le vrai changement depuis 2022. Les nouveaux projets créés avec `symfony new --webapp` utilisent **AssetMapper**, désormais recommandé : il tourne entièrement en PHP, sans étape de build, et s'appuie sur les import maps natives du navigateur. L'appel `{{ importmap('app') }}` remplace les tags de script de l'époque. Un paquet tiers s'ajoute avec `php bin/console importmap:require bootstrap`.

Webpack Encore reste documenté, stable et fonctionnel — mais il est en mode maintenance : plus de nouvelles fonctionnalités, seulement des correctifs. Il garde son intérêt quand tu as besoin de compiler du JSX ou des single-file components, ce qu'AssetMapper ne fait pas.

L'épisode suivant, [la création du système d'articles](/blog/creer-un-blog-avec-symfony-6-04-creation-du-systeme-darticles/), remplit ce squelette avec de vraies données. La [documentation de l'héritage Twig](https://twig.symfony.com/doc/3.x/tags/extends.html) détaille les blocs, et l'[introduction officielle de Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/) donne les extraits CDN à jour.

## Pour approfondir

**[Symfony et backend : du premier écran à la production](https://pentiminax.fr/blog/symfony-backend.md)**

Un parcours Symfony par objectif : Twig et Doctrine, projets concrets, déploiement continu, permissions et diagnostic à partir des articles du site.

[Parcourir le guide Symfony et backend](https://pentiminax.fr/blog/symfony-backend.md)

## Questions fréquentes

**Comment inclure Bootstrap 5 dans un projet Symfony ?**

Deux voies : le CDN, avec la feuille de style dans le head et le bundle JavaScript avec Popper avant la fermeture du body, ou l'importmap avec php bin/console importmap:require bootstrap quand le projet utilise AssetMapper.

**AssetMapper ou Webpack Encore pour les assets ?**

AssetMapper est le défaut des nouveaux projets créés avec symfony new --webapp : il tourne en PHP, sans étape de build. Webpack Encore reste documenté et fonctionnel, mais il est en mode maintenance.

**Quels blocs Twig faut-il prévoir dans le template de base ?**

Le squelette fourni par le recipe Twig définit title, stylesheets, javascripts et body. C'est le socle : chaque template enfant ne redéfinit que ce dont il a besoin.

**Comment fonctionne l’héritage de templates en Twig ?**

Le template enfant commence par extends, puis redéfinit des blocs avec block. Un bloc non redéfini garde le contenu du parent, et la fonction parent() permet de réutiliser ce contenu dans un bloc surchargé.

**Bootstrap 5 a-t-il besoin de jQuery ?**

Non, et la documentation d'introduction de Bootstrap 5.3 ne le mentionne pas : depuis la version 5, les composants JavaScript ne dépendent plus de jQuery.