عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs On SPIP-Zone, 281 visitors now

Home > Templates > Tools for Templates > BootStrap pour SPIP > BootStrap for SPIP

BootStrap for SPIP

9 October 2015 – by rjadot

All the versions of this article: [English] [français]

7 Votes

Documentation origin http://spipr.nursit.com/bootstrap


BootStrap is a framework which facilitates and accelerates the front-end development. It includes

  • A very complete CSS base (in LESS format) configured from variables files;
  • a set of conventions of HTML structure and classes naming;
  • simple Javascripts libraries for the most common functions.

BootStrap has a detailed documentation which facilitates its handling.

BootStrap for SPIP

A plugin BootStrap for SPIP facilitates the integration of BootStrap v2. The plugin includes all the CSS of BootStrap (v2.3.2) and adds to them a layer of adaptation to SPIP.

Adaptation to the SPIP markup

The plugin integrates the CSS of BootStrap without modification, but adds to it an adaptation layer to the HTML generated by SPIP. So, the SPIP forms which use a HTML markup different from the one proposed by BootStrap benefit all the same from the styles of BootStrap. If you add your own forms, you can use as well the markup of BootStrap or the one of the SPIP, according to your habits.

Tables generated by SPIP from the editorial contents also inherit the styles of BootStrap.

Furthermore, the plugin adapts the the pagination markup of SPIP so that it benefits from styles of BootStrap.


The typography natively proposed by SPIP in its default template is better than that the BootStrap one. It’s also more accessible as it’s implemented in em and not px.
The BootStrap for SPIP plugin thus takes back typography of SPIP for these reasons.


PNG - 2.8 kb

The plugin BootStrap for SPIP also the integrates #grid display tool. It allows the webmasters to display the currently used grid. It’s configured to settle by default on the 3 BootStrap grids (according to the screen width) and you can use it thus directly.


PNG - 4.7 kb

To allow to work directly in style sheets in LESS format without passing by a stage of manual compilation, the plugin BootStrap requires the plugin LessCSS for SPIP’ which automatically compiles LESS sheets in CSS on the fly.

BootStrap in SPIPr

All the BootStrap styles are included in the pages of the SPIPr template, it is thus possible to use the whole markup proposed in the BootStrap documentation and to benefit from its styles and scaffolding.
In the case of forms, it is possible also to use the tagging convention proposed in SPIP, which is entirely managed by the adaptation of BootStrap to SPIP.

On the other hand, most of the Javascripts of BootStrap are not integrated by default and you will thus have to add them in your templates to use the corresponding features of BootStrap.

Demo page

The plugin BootStrap for SPIP integrates several demo pages demo/ directory.

The main demo page is visible at the spip.php?page=demo/bootstrap [1]. This page displays all the elements of interface managed by BootStrap, as well as a typographic charter which allows to verify the display of all the usual typographic enrichments.

PNG - 210.9 kb
BootStrap demo page

Organization of files

The plugin BootStrap for SPIP is organized in two under files(cases) bootstrap / and bootstrap2spip/:

bootstrap/ et bootstrap2spip/ :

  • bootstrap/
    • bootstrap/
      • css/
        • BootStrap LESS files
      • img/
        • BootStrap glyphicons images
      • js/
        • BootStrap javascripts files
    • bootstrap2spip/ Overloads the Bootstrap files
      • css/
        • boot-theme.less empty file available for customization
        • bootswatch.less empty file available for customization
        • spip.css Some styles for the code generated by SPIP
        • spip.list.less styles of the lists module
        • spip.comment.less styles of comments
      • formulaires/
        • charter.html SPIP demo form
        • recherche.html SPIP search form adapted to BootStrap
      • js/
        • hashgrid.js #grid
        • html5.js HTML5 support for old browsers
      • modeles/
        • SPIP pagination templates adapted to BootStrap

LESS sheets overloads

The bootstrap2spip/ directory contains LESS style sheets which overload those of BootStrap. Let us see a concrete example with the sheet alerts.less:

  1. /* importer la feuille d'origine de BootStrap */
  2. @import "bootstrap/css/alerts.less";
  3. /* Ajout des classes info, success, warning, error utilisées dans SPIP */
  4. .info {.alert; .alert-info;}
  5. .success {.alert; .alert-success;}
  6. .warning {.alert;}
  7. .error {.alert;.alert-error}


Here we see that the overloads for SPIP completely uses the native BootStrap file by simply adding to it some definitions which inherit from BootStrap. It is the case of most of the overloading files in bootstrap2spip/ with the exception of the typography completely taken back by SPIP.

Using the overloads

During the compilation of the LESS files, the plugin LessCSS interprets each @import directive by searching the file in the SPIP path, including plugins and squelettes/ direcory.

So, if you write @import "css/alerts.less", SPIP is going to look for the file css/alerts.less in squelettes/ then in all the directories declared by the plugins.
In the BootStrap plugin, the search will be made at first in the bootstrap2spip/ diretory to see if a specific overload for SPIP exists, then in bootstrap/ to take the native BootStrap files otherwise.

You can thus customize finely the overloads of BootStrap in the following way:

For example:

  • You can cancel the adaptation to SPIP for the file css / alerts.css by putting the contents following in skeletons / css / alerts.css:
    1. /* importer la feuille d'origine de BootStrap */
    2. @import "bootstrap/css/alerts.less";


  • vous pouvez compléter l’adaptation à SPIP avec vos propres compléments. Pour le fichier css/alerts.css, en mettant le contenu suivant dans squelettes/css/alerts.css :
    1. /* importer la feuille adaptée à SPIP */
    2. @import "bootstrap2spip/css/alerts.less";
    3. /* mes ajouts */
    4. ...


In a general way, you should avoid overloading BootStrap LESS files to benefit from updates of these files during the update of the plugin.

For your site customization, it’s better to use 2 files css/boot-theme.less and css/bootswatch.less which were added and are empty by default. They allow to add customizations of BootStrap CSS, which will be compiled with the set of BootStrap files (which allows to use all the BootStrap mixins).

Images in LESS sheets

A point to which it is necessary to pay attention with LESS is about the relative ways towards the decoration images: the functioning is different from what we can be used in CSS sheets.

In a CSS sheet, if you use the code url(../img/deco.png) the relative way /img/deco.png is interpreted with regard to the location of the CSS file.

In a LESS sheet, with the same code, the relative way is interpreted with regard to the location of the main compiled LESS file. It makes an important difference when the directive @import is used.
Indeed, in this case it is always the location of the main file, the one who makes @import, which is taken in reference, and not the location of included files, even if it is the which references the image.

In the case of BootStrap, it means that it is the location of the file bootstrap.less that is taken into account. So, to use an image in a customized BootStrap LESS file, it is advisable to give a relative way with regard to the file bootstrap.less.

The solution consists then in copying the file bootstrap.less in your squelettes/, folder next to your customized file, without forgetting to also copy there the img/ folder with glyphicons. It is rather impractical, and in a general way it is avoidable by adding the images of decoration in a LESS file which is not included by bootstrap.less but directly by the SPIPr template.


An indicative and not exhaustive list of tools usable as a supplement to BootStrap to generate themes, build mockup [2]


[1You must have the webmaster statute to see this page

[2take care about the BootStrap version which are supported by these tools: if it is an older version that the one used by SPIPr, some variables may be lacking in the generated sheets

updated on 9 October 2015

Back to top

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Add a document

Back to top

Here they're talking

  • (fr) GIS 4

    11 août 2012 – 1310 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • (fr) Formidable, le générateur de formulaires

    23 janvier 2012 – 2052 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • (fr) Envoyer des fichiers avec un formulaire Formidable

    2 janvier – 13 commentaires

    La version 3.0.0 du plugin Formidable permet de créer des formulaires comprenant des envois de fichiers. Cet article regroupe la documentation relative à cette fonctionnalité. Pour une présentation générale de Formidable, voir « Formidable, le (...)

  • (fr) Pages uniques

    11 décembre 2008 – 259 commentaires

    Allez, avouez... il ne vous est jamais arrivé d’avoir besoin d’articles qui ne sont rattachés à aucun rubriquage particulier ? Des articles uniques, n’ayant ni de thème, ni de rapport avec aucun autre ? Ou encore des articles pour lesquels vous avez (...)

  • (fr) ciar : plugin « Accès restreints issus de Giseh »

    28 novembre 2011 – 86 commentaires

    Cette version ajoute une gestion par groupe d’auteurs, ainsi que la compatibilité avec SPIP 3. Pour mémoire, le plugin « ciar » offre des accès restreints reprenant les fonctionnalités de ceux de Giseh. Le plugin est utilisable sans utiliser les autres (...)