Aller au contenu principal

Bootstrap

Comment installer Bootstrap dans un projet Symfony

Qu'est-ce que Bootstrap ?​

Bootstrap est un framework CSS open-source très populaire qui permet de créer rapidement des interfaces responsives et modernes, grâce à un système de grille puissant et une large collection de composants prêts à l'emploi.

Comment l'installer dans Symfony ?​

Par défaut, Symfony charge déjà :

  • app.js
  • qui importe app.css
  • puis ce bundle est injecté dans base.html.twig via {{ importmap('app') }}
info

Pour utiliser Bootstrap, nous avons 2 options :

  • soit charger Bootstrap par CDN dans base.html.twig
  • soit l'intégrer dans app.css

Option 1 — Charger Bootstrap par CDN​

La méthode la plus simple et la plus rapide : charger Bootstrap par CDN directement dans le fichier de base de nos templates Twig.

astuce

Pour récupérer les liens CDN de Bootstrap, consulter la documentation officielle : https://getbootstrap.com/docs/5.3/getting-started/introduction/#cdn-links

Bootstrap nécessite 2 ressources : une feuille de styles CSS et un fichier JavaScript.

Il faut ajouter les 2 dans base.html.twig :

{% block stylesheets %}
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
    >
{% endblock %}

{% block javascripts %}
    {% block importmap %}{{ importmap('app') }}{% endblock %}
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"
        defer
    ></script>
{% endblock %}

Exemple complet​

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}Welcome!{% endblock %}</title>

        {% block stylesheets %}
            <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
            >
        {% endblock %}

        {% block javascripts %}
            {% block importmap %}{{ importmap('app') }}{% endblock %}
            <script
                src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"
                defer
            ></script>
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>
astuce

La balise <meta name="viewport"> est recommandée avec Bootstrap pour garantir un bon comportement responsive sur mobile.

Avantages​

  • ultra simple
  • pas besoin d'installation supplémentaire
  • parfait pour tester rapidement

Inconvénient​

  • dépend d'un CDN externe

Option 2 — Intégrer Bootstrap dans app.css​

Cette méthode est plus propre car elle centralise tout le style dans app.css et évite de dépendre d'un CDN externe.

Dans app.css :

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css');

body {
    background-color: #f8f9fa;
}

Ici :

  • Bootstrap est chargé en premier
  • notre CSS vient ensuite et peut le surcharger

Quand choisir cette option ?​

Si nous voulons garder tout notre style centralisé dans app.css.

Comment utiliser Bootstrap dans un template​

Bootstrap repose sur des classes CSS à appliquer sur les balises HTML.

Par exemple dans index.html.twig :

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

{% block title %}Accueil{% endblock %}

{% block body %}
    <div class="container mt-4">
        <h1>Bienvenue</h1>
        <p class="lead">Cette page utilise Bootstrap dans Symfony.</p>

        <form>
            <div class="mb-3">
                <label for="name" class="form-label">Nom</label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    class="form-control"
                    placeholder="Votre nom"
                >
            </div>

            <button type="submit" class="btn btn-primary">Envoyer</button>
        </form>
    </div>
{% endblock %}
info

Contrairement à Pico.css, Bootstrap ne stylise pas les balises HTML nativement : il faut ajouter des classes CSS explicitement.

Voici les classes les plus courantes :

  • container ou container-fluid — pour centrer et encadrer le contenu
  • mt-4, mb-3, p-2 — pour les marges et paddings (système d'espacement)
  • form-label, form-control — pour styliser les formulaires
  • btn, btn-primary, btn-danger... — pour les boutons
  • row, col-md-6 — pour le système de grille responsive

Remarques​

Notre app.css contient actuellement :

body {
    background-color: skyblue;
}

Avec Bootstrap, ce fond bleu entrera en conflit avec le style par défaut. Il vaut mieux le remplacer par quelque chose de plus neutre, par exemple :

.container {
    margin-top: 2rem;
}