Les colonnes

Répartition horizontale

Introduction

Les colonnes font partie des outils essentiels pour composer votre page. Elles s'utilisent très simplement de la façon suivante :

N'hésitez pas à modifier le code ci-dessous pour faire des essais :

                            <div class="columns">
                            <div class="column"></div>
                            <div class="column"></div>
                            <div class="column"></div>
                            </div>

Mode wireframe

Taille des colonnes

Les colonnes se basent sur une grille de 12 unités de large.

Utiliser les notations is-1 à is-12 pour définir la taille de vos colonnes.

                            <div class="columns">
                            <div class="column is-3"></div>
                            <div class="column is-6"></div>
                            <div class="column is-3"></div>
                            </div>

Mode wireframe

is-narrow permet à une colonne de prendre la taille minimale possible, en fonction de son contenu :

                            <div class="columns">
                            <div class="column is-narrow">.</div>
                            <div class="column is-6"></div>
                            <div class="column"></div>
                            </div>

Mode wireframe

Colonnes sur plusieurs lignes

Ajoutez is-multiline pour que vos colonnes passent automatiquement d'une ligne à l'autre

                            <div class="columns is-multiline">
                            <div class="column is-3"></div>
                            <div class="column is-3"></div>
                            <div class="column is-4"></div>
                            <div class="column is-2"></div>
                            <div class="column is-4"></div>
                            <div class="column is-5"></div>
                            <div class="column is-3"></div>
                            <div class="column is-4"></div>
                            <div class="column is-4"></div>
                            <div class="column is-4"></div>
                            </div>

Mode wireframe

Gestion responsive

Par défaut, les colonnes passent les unes en-dessous des autres en version mobile. Il est possible d'utiliser la classe is-mobile pour les forcer à rester côte-à-côte sur mobile.

                            <div class="columns is-mobile">
                            <div class="column"></div>
                            <div class="column"></div>
                            <div class="column"></div>
                            </div>

Mode wireframe

Il est également possible de personaliser la taille des colonnes en fonction de la taille de l'écran

                            <div class="columns is-mobile">
                            <div class="column is-2-desktop is-2-tablet is-6-mobile"></div>
                            <div class="column is-10-desktop is-10-tablet is-6-mobile"></div>
                            </div>

Mode wireframe

Centrer les colonnes

is-centered permet de centrer les colonnes

                            <div class="columns is-centered">
                            <div class="column is-2"></div>
                            <div class="column is-4"></div>
                            <div class="column is-2"></div>
                            </div>

Mode wireframe

Il est possible d'utiliser des offets is-offset-1 à is-offset-12 pour gérer l'alignement horizontal des colonnes de façon plus fine

                            <div class="columns is-mobile">
                            <div class="column is-2 is-offset-1-desktop is-offset-3-mobile"></div>
                            <div class="column is-4 is-offset-2"></div>
                            <div class="column is-2"></div>
                            </div>

Mode wireframe

Imbrication

Les colonnes peuvent être imbriquées

                            <div class="columns">
                            <div class="column is-3"></div>
                            <div class="column is-6">
                            <div class="columns">
                            <div class="column is-3"></div>
                            <div class="column is-6"></div>
                            <div class="column is-3"></div>
                            </div>
                            </div>
                            <div class="column is-3"></div>
                            </div>

Mode wireframe

Gestion de la marge entre les colonnes

La marge entre les colonnes peut être supprimée à l'aide de is-gapless ...

                            <div class="columns is-gapless">
                            <div class="column is-3"></div>
                            <div class="column is-6"></div>
                            <div class="column is-3"></div>
                            </div>

Mode wireframe

… ou personnalisée avec is-variable et is-0 à is-12

                            <div class="columns is-variable is-2">
                            <div class="column is-3"></div>
                            <div class="column is-6"></div>
                            <div class="column is-3"></div>
                            </div>
                            <div class="columns is-variable is-8">
                            <div class="column is-3"></div>
                            <div class="column is-6"></div>
                            <div class="column is-3"></div>
                            </div>

Mode wireframe