Bulma : créer un site web responsive en 30 minutes
Bulma ne fabrique pas un site à votre place : il fournit les règles CSS qui accélèrent la mise en page. Voici comment livrer, en 30 minutes, une page responsive propre, ses limites comprises et les contrôles à ne pas oublier.
Ordinateur portable et smartphone affichant une même mise en page web responsive sur un bureau lumineux
- Lecture
- 10 min 2 199 mots
- Niveau
- Débutant
- Angle
- le mécanisme derrière la rapidité
- Mis à jour
Ce qu'il faut retenir
- Bulma accélère surtout la mise en page : ses classes CSS composables évitent d’écrire une grille et des styles de base à la main.
- Trente minutes suffisent pour une page vitrine statique cohérente, pas pour un site complet avec comptes, paiement ou contenu dynamique.
- La combinaison `columns` et `column is-half-desktop` permet d’obtenir deux colonnes sur grand écran et une seule sur mobile.
- Bulma ne rend pas les menus, fenêtres modales ou formulaires fonctionnels : ces comportements exigent du JavaScript et une logique serveur.
- Avant de publier, vérifiez le chargement du CSS, la lisibilité mobile, les liens, les contrastes et le comportement du formulaire.
Sommaire 7 parties
- Pourquoi Bulma donne une impression de vitesse
- Préparer un projet minimal sans dépendance cachée
- Composer la page avec les classes qui comptent
- Ce que la rapidité de Bulma ne fait pas à votre place
- Personnaliser sans casser la cohérence visuelle
- Mettre en ligne, chiffrer et corriger les ratés courants
- La vérification à faire avant d’appeler la page terminée
Avec Bulma, le résultat crédible en 30 minutes n’est pas un « site web » complet, mais une page vitrine statique responsive : une présentation, une offre, un portfolio ou une page d’événement. Cette nuance explique à la fois sa force et sa limite. Bulma fournit une feuille de styles prête à l’emploi ; vous assemblez des classes dans un HTML sémantique pour obtenir rapidement une grille, des boutons, des cartes, des espacements et une typographie régulière. Il ne produit ni contenu, ni base de données, ni interactions métier. Bien cadré, cet outil évite donc une longue phase de CSS artisanal sans faire disparaître le travail de conception.
Pourquoi Bulma donne une impression de vitesse
Le mécanisme est simple et souvent mal compris : Bulma est un framework CSS sans JavaScript imposé. Ses classes nomment des décisions de mise en page déjà préparées. Au lieu d’écrire des règles pour créer une section avec une largeur lisible, un fond coloré et un bouton, vous appliquez par exemple section, container, button et is-primary. Les classes de structure ne sont pas magiques : elles ajoutent des propriétés CSS préécrites, notamment pour les marges, le flexbox et les points de rupture d’écran.
Le périmètre réaliste d’une session de 30 minutes
- 30 min pour un prototype publiable Une page, un objectif, du contenu déjà rédigé.
- 0 ligne de JavaScript pour la grille Colonnes et adaptation mobile sont gérées par CSS.
- 1 fichier HTML peut suffire au départ Avec la feuille Bulma stockée localement à côté du projet.
- Ce que Bulma règle vite : la largeur du contenu, la disposition en colonnes, les boutons, cartes, messages, formulaires et espacements courants.
- Ce qu’il ne règle pas : l’écriture des textes, les images, le référencement éditorial, l’envoi réel d’un formulaire, l’authentification ou le paiement.
- Ce qui demande encore un choix humain : une hiérarchie de titres, un contraste suffisant, un appel à l’action unique et la suppression de tout élément décoratif inutile.
Préparer un projet minimal sans dépendance cachée
Créez un dossier avec index.html et le fichier CSS minifié de Bulma, nommé ici bulma.min.css. Cette installation locale est particulièrement utile pour apprendre : votre page s’ouvre même sans connexion et vous savez exactement quel fichier elle charge. Dans le <head>, ajoutez la feuille avec <link rel='stylesheet' href='bulma.min.css'>, puis la balise <meta name='viewport' content='width=device-width, initial-scale=1'>. Sans cette dernière, le navigateur mobile peut afficher la page comme une version réduite d’un écran large.
Le déroulé serré pour construire une landing page
-
Fixez un seul objectif, 4 minutes
Choisissez une action mesurable : demander un devis, réserver une place ou consulter un portfolio. Rédigez un titre, un sous-titre, un libellé de bouton et trois bénéfices avant de toucher au HTML.
-
Posez le squelette sémantique, 5 minutes
Dans
<body>, prévoyez un<header>, un<main>et un<footer>. Dans le contenu principal, placez un seul<h1>, puis des sections avec des<h2>. Cette structure reste utile même si Bulma est retiré. -
Montez le haut de page, 9 minutes
Utilisez une zone
hero, unehero-bodyet uncontainer. Ajoutez une couleur avecis-primary, un boutonbutton is-lightet une phrase qui explique immédiatement l’intérêt de votre proposition. -
Ajoutez trois preuves ou offres, 7 minutes
Créez
columns, puis troiscolumn. Dans chacune, unecardpeut contenir un titre, un texte bref et un lien. Gardez trois blocs : cette quantité se lit bien sans transformer la page en catalogue. -
Testez et publiez une première version, 5 minutes
Réduisez la fenêtre du navigateur, ouvrez la page sur un téléphone et contrôlez chaque lien. Une fois le fichier validé, envoyez-le sur un hébergement de site statique ou dans l’espace web de votre hébergeur.
Composer la page avec les classes qui comptent
La structure la plus productive associe section pour créer une zone verticale respirante, container pour limiter la largeur de lecture, puis columns et column pour distribuer les contenus. Écrivez par exemple <div class='columns'> autour de deux blocs <div class='column is-half-desktop'>. Chaque bloc occupera la moitié de la largeur à partir du bureau et retombera naturellement sur une ligne complète sur petit écran. C’est ce comportement mobile par défaut qui évite de coder une règle média dès le premier prototype.
| Séquence | Durée | Classes ou balises utiles | Résultat vérifiable |
|---|---|---|---|
| Objectif et textes | 4 min | h1, p, button | Un message et un bouton rédigés |
| Squelette HTML | 5 min | header, main, section | Une page structurée sans style |
| En-tête visuel | 9 min | hero, hero-body, container | Un haut de page lisible |
| Contenu en grille | 7 min | columns, column, card | Trois blocs qui s’empilent sur mobile |
| Contrôle et mise en ligne | 5 min | Outils du navigateur | Liens, CSS et affichage mobile validés |
Ce calendrier suppose que les textes et l’image sont disponibles avant le démarrage.
Pour les éléments récurrents, retenez peu de familles de classes. button is-primary crée l’appel à l’action principal ; notification is-warning attire l’attention sur une information ponctuelle ; card groupe une offre ou un article ; field, label, control et input structurent un champ de formulaire. Ajoutez les modificateurs avec parcimonie : une couleur principale, une couleur neutre et une seule taille de bouton suffisent souvent. L’accumulation de variantes donne rapidement un résultat incohérent.
La vitesse vient des choix déjà tranchés ; la qualité vient de ceux que vous refusez d’ajouter.
Ce que la rapidité de Bulma ne fait pas à votre place
Le point aveugle des démonstrations rapides est l’interactivité. Bulma habille un menu de navigation, une fenêtre modale ou un menu « burger » mobile, mais ne les ouvre ni ne les ferme seul. Pour un menu burger, il faut écrire un petit script qui ajoute et retire la classe is-active sur le bouton et le panneau associé, tout en mettant à jour les attributs d’accessibilité. Pour un formulaire, il faut aussi un service de traitement ou un serveur capable de recevoir les données. Un bouton visuellement parfait peut donc rester sans effet.
Choisir Bulma selon l’ampleur du projet
Bulma est adapté
Une interface surtout statique
- Une page de lancement, un mini-site institutionnel ou un portfolio avec peu de gabarits.
- Une équipe qui veut écrire du HTML clair et contrôler elle-même les interactions nécessaires.
- Un prototype dont la priorité est la mise en page responsive, pas une bibliothèque de composants interactifs.
Prévoyez autre chose ou davantage
Un produit avec logique applicative
- Une boutique nécessite un catalogue, un panier, un paiement et une gestion des commandes.
- Un espace membre demande comptes, permissions, sécurité et stockage de données.
- Un tableau de bord riche demande des composants, des états et des tests JavaScript au-delà d’une feuille CSS.
Ce qu'on retient : Bulma est excellent pour poser l’enveloppe visuelle d’un projet. Il doit être associé à des outils applicatifs lorsque le besoin dépasse l’affichage et la navigation simple.
Personnaliser sans casser la cohérence visuelle
Commencez par un petit fichier style.css chargé après Bulma. Vous pourrez y régler votre police, une couleur de marque, le rayon des images ou un espacement précis, sans modifier la bibliothèque. Une règle telle que .hero { background: #174a5c; } est plus durable que la modification directe de bulma.min.css, laquelle serait perdue lors d’une mise à jour. Lorsque le projet grandit, Bulma peut aussi être personnalisé à sa source avec Sass ; ce travail est utile, mais il n’est pas nécessaire à une première page.
- Donnez à chaque image un texte alternatif qui décrit son information, pas son décor :
alt='Atelier de céramique avec trois établis en bois'est plus utile quealt='image'. - Conservez un contraste net entre le texte et le fond. Un bouton pâle sur un fond clair peut être élégant sur votre écran et illisible dehors sur un téléphone.
- N’utilisez pas la couleur seule pour signaler une erreur ou un état. Ajoutez un message explicite près du champ concerné.
- Testez la page au clavier : le focus doit rester visible et l’ordre de tabulation doit suivre l’ordre de lecture.
Mettre en ligne, chiffrer et corriger les ratés courants
Une page Bulma statique se publie comme n’importe quel ensemble de fichiers : transférez index.html, bulma.min.css, style.css et vos images dans le répertoire public de l’hébergement. Ouvrez ensuite l’adresse publiée sur un téléphone, pas seulement le fichier local. Si la page apparaît sans mise en forme, commencez par l’outil réseau du navigateur : un code de réponse 404 sur le CSS révèle presque toujours un mauvais chemin ou une différence entre majuscules et minuscules dans le nom de fichier.
| Poste | Coût courant | Période | Utilité |
|---|---|---|---|
| Bulma | 0 € | sans échéance | Feuille CSS open source |
| Nom de domaine | 8 à 18 € | par an | Adresse web personnalisée |
| Hébergement statique | 0 à 6 € | par mois | Publication de fichiers HTML et CSS |
| Hébergement mutualisé | 3 à 10 € | par mois | Fichiers web et services complémentaires |
Ordres de grandeur grand public : les options, promotions et renouvellements doivent être vérifiés avant souscription.
Si les colonnes restent côte à côte sur un téléphone alors que vous les voulez empilées, vérifiez les classes de taille : is-half s’applique à toutes les largeurs, tandis que is-half-desktop ne s’applique qu’à partir du format bureau. Si votre modification CSS semble ignorée, assurez-vous que style.css est chargé après Bulma et observez dans l’inspecteur quelle règle gagne. Enfin, si une image déforme une carte, préparez un fichier aux proportions cohérentes plutôt que de multiplier les réglages de hauteur.
La vérification à faire avant d’appeler la page terminée
Contrôle final en cinq minutes
- Le
<title>de l’onglet décrit précisément la page et le<h1>n’apparaît qu’une fois. - La feuille
bulma.min.csset votre éventuelstyle.cssrépondent sans erreur dans l’outil réseau du navigateur. - À 360 pixels de large, les colonnes se lisent une sous l’autre, le bouton reste accessible et aucun texte ne déborde.
- Chaque image informative a un attribut
alt, chaque lien mène à une destination existante et chaque bouton a une action réelle. - Le formulaire affiche un retour compréhensible en cas de succès comme d’échec, ou il est retiré tant que son traitement n’est pas prêt.
- Les contrastes, le focus clavier et le texte du bouton ont été vérifiés sans vous fier uniquement à l’apparence sur un grand écran.
On répond aux questions que vous alliez taper ensuite
Peut-on utiliser Bulma avec WordPress ?
Oui, mais Bulma doit être intégré proprement au thème ou à un thème enfant, afin que la feuille CSS soit chargée par le mécanisme prévu par WordPress. Évitez de modifier les fichiers d’un thème existant : une mise à jour effacerait vos changements. Bulma peut servir à concevoir un gabarit sur mesure, mais il faut aussi éviter les conflits avec les styles déjà fournis par le thème et les extensions.
Bulma fonctionne-t-il avec React, Vue ou un autre framework JavaScript ?
Oui. Bulma reste du CSS : chargez sa feuille de styles dans le projet, puis appliquez les mêmes classes aux éléments rendus par votre framework. Avec React, écrivez className au lieu de class. En revanche, Bulma ne fournit pas à lui seul des composants interactifs React ou Vue avec leur état déjà programmé ; un menu, une modale ou une notification dynamique demandent votre propre logique ou une bibliothèque compatible.
Comment alléger Bulma si je n’utilise que quelques composants ?
Pour une petite page, charger la feuille complète est généralement le choix le plus simple et le plus robuste. Quand la performance devient un enjeu, partez de la version source personnalisable et ne conservez que les modules utiles, par exemple la grille, les boutons et les formulaires. Vous pouvez aussi supprimer les styles inutilisés lors de votre processus de construction. Faites ce travail après avoir mesuré : une optimisation prématurée complique vite la maintenance.
Bulma est-il suffisant pour créer une boutique en ligne ?
Bulma peut donner une présentation propre aux fiches produit, au panier et aux boutons, mais il ne crée pas une boutique fonctionnelle. Il manque la base de données des produits, les stocks, le calcul des taxes ou livraisons, le paiement, les comptes clients et la sécurité associée. Pour vendre, utilisez une solution e-commerce ou un développement serveur adapté ; Bulma peut alors rester la couche de présentation de l’interface.
Pourquoi le menu burger Bulma ne s’ouvre-t-il pas sur mobile ?
C’est attendu : Bulma fournit le style visuel du bouton burger et du panneau de navigation, pas le script qui modifie leur état. Votre code doit détecter le clic, ajouter ou retirer is-active sur les éléments concernés et actualiser aria-expanded pour les lecteurs d’écran. Vérifiez aussi que le bouton cible bien l’identifiant du panneau. Sans ce JavaScript, le menu peut être élégant mais restera statique.
Sujets abordés
- bulma
- css
- création web
- site responsive
- html
On continue ?
À lire dans la foulée
Pourquoi la vitre de douche s’entartre plus vite que le reste
Une paroi de douche qui se couvre de traces blanches en quelques semaines, alors que le carrelage juste à côté reste comparativement propre bien plus longtemps, n’a rien d’un hasard. Ce contraste s’explique par la façon dont l’eau se comporte différemment sur le verre que sur les autres surfaces de la salle de bain, et un geste quotidien simple règle la quasi-totalité du problème.
Pourquoi le poisson rouge devient plus pâle en vieillissant
Un poisson rouge autrefois éclatant qui devient progressivement plus pâle, parfois presque blanc ou argenté sur certaines zones, après plusieurs années dans le même bac, inquiète souvent son propriétaire. Ce changement de couleur suit dans la grande majorité des cas un processus biologique naturel lié au vieillissement, distinct des rares cas où une vraie maladie explique la décoloration.
Pourquoi les fourmis rentrent dans la cuisine à certaines périodes
Une cuisine parfaitement tranquille pendant des mois qui se retrouve soudain traversée par une colonne de fourmis, puis redevient calme quelques semaines plus tard, suit une logique biologique précise. Ce comportement saisonnier dépend du cycle de vie des colonies et des conditions climatiques extérieures, bien plus que d’un changement dans la propreté du foyer.
Pourquoi la télécommande faiblit quand les piles sont presque vides
Une télécommande qui demande d’appuyer plusieurs fois, ou de la rapprocher fortement de l’appareil, avant de fonctionner de nouveau normalement quelques jours plus tard n’a rien d’aléatoire. Ce déclin progressif suit une logique électrique précise, liée à la tension délivrée par des piles qui se déchargent, bien avant qu’elles ne soient totalement vides.
Pourquoi le chien tourne en rond avant de se coucher
Un chien qui tourne plusieurs fois sur lui-même avant de s’installer pour dormir répète un geste que l’on retrouve chez la quasi-totalité des chiens, quelle que soit leur race ou leur environnement. Ce comportement remonte à un instinct hérité de leurs ancêtres sauvages, mais certaines variantes de ce geste méritent tout de même une attention particulière.
Pourquoi le frigo fait du bruit la nuit et pas le jour
Un réfrigérateur qui semble ronronner, cliqueter ou vibrer davantage une fois la maison silencieuse surprend souvent, alors que l’appareil n’a pourtant pas changé de comportement. Le phénomène s’explique en grande partie par l’environnement sonore qui change entre le jour et la nuit, mais certains bruits nocturnes méritent tout de même d’être surveillés.