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

286 Plugins, 197 contribs On SPIP-Zone, 273 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) Balloons

    12 avril 2013 – 12 commentaires

    Balloons est un squelette de blog RWD pour SPIP 3 basé sur la dist (les squelettes par défaut de SPIP). Le squelette est une adaptation du thème Balloons pour Wordpress créé par Chris Magiera. Comme Chris a eu la bonne idée de diffuser son thème (...)

  • (fr) Passer un plugin SPIP 3.0 vers SPIP 3.1

    6 février – commentaires

    SPIP 3.1 est une version de maintenance de SPIP 3.0, se reporter à l’article pour le détail complet. La mise à jour des bibliothèques Javascript embarquées et certaines évolutions peuvent faire qu’un plugin compatible SPIP 3.0 ne fonctionne plus ou (...)

  • (fr) Mots techniques

    20 février 2011 – 22 commentaires

    Le plugin « Mots techniques » ajoute la possibilité dans SPIP de déclarer « techniques » certains groupes de mots. Une fois fait, les mots de ce groupe ne s’afficheront pas (par défaut) dans l’espace public de votre site. Un des usages est d’avoir des (...)

  • (fr) Références des vérifications

    27 mai 2011 – 12 commentaires

    Liste et description des vérifications actuellement disponibles et de leurs options.

  • (fr) ScolaSPIP 4

    19 janvier – 112 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)