Mis à jour le mercredi 12 juillet 2017
  • 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Une grille ?

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

L'organisation spatiale des pages web est l'une des premières préoccupations lorsque l'on crée un site web. Prévoit-on une bannière ? Faut-il un espace pour un menu à gauche ou en haut ? Y aura-t-il des blocs sur un des côtés pour recevoir certaines fonctionnalités comme la connexion ou des infos ? Faut-il prévoir un bas de page ?

Bootstrap ne répond évidemment pas à ces questions, mais il peut grandement vous faciliter la tâche, avec son système de grille, pour obtenir le résultat que vous souhaitez.

Petite visite guidée…

Présentation

Le principe d'une grille

Une grille est tout simplement un découpage en cellules :

Une grille
Une grille

On peut alors décider d'organiser du contenu en utilisant pour chaque élément une ou plusieurs cellules :

On peut placer des éléments sur la grille
On peut placer des éléments sur la grille

La grille de Bootstrap comporte 12 colonnes comme dans l'illustration précédente. Vous commencez sans doute à comprendre l'utilité de cette organisation.

Terminologie

Une grille est découpée en rangées (appelées row, parce que tout est en anglais) et colonnes (col) :

Une grille est composée de rangées et de colonnes
Une grille est composée de rangées et de colonnes

La grille de Bootstrap

La grille de Bootstrap n'est pas aussi idéale que celle présentée précédemment. Le découpage en colonnes est tout simplement une division en pourcentage de la largeur de la fenêtre de visualisation et correspond donc à ce qu'on vient de voir. En revanche, il n'en est pas vraiment de même pour les rangées. Ces dernières ont la hauteur de leur contenu :

Les rangées ont la hauteur de leur contenu
Les rangées ont la hauteur de leur contenu

Moralité, une rangée prend la hauteur du plus gros élément qu'elle contient. Puisque la largeur des colonnes est contrainte, le flux des données s'écoule verticalement, ce qui est un comportement HTML classique. Il faudra en tenir compte lors de la mise en page.

Organisation de la grille

Bootstrap est essentiellement un fichier CSS. Il comporte de nombreuses classes que l'on peut utiliser directement dans les balises HTML.

La première classe à connaître estrow, qui représente une rangée. Cette classe établit des marges négatives à droite et à gauche :

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Il faut ensuite définir le nombre de colonnes pour chaque élément en sachant qu'il y en a au maximum 12. Pour définir le nombre de colonnes utilisées pour chaque élément, on dispose de quatre batteries de 12 classes :

  • col-xs-1 oucol-sm-1 oucol-md-1 oucol-lg-1

  • col-xs-2 oucol-sm-2 oucol-md-2 oucol-lg-2

  • ...

  • col-xs-12 oucol-sm-12 oucol-md-12 oucol-lg-12

Pourquoi 4 sortes de classes pour les colonnes ?

Je vous ai déjà dit que Bootstrap est « responsive », ce qui veut dire qu'il s'adapte à la taille de l'écran. Il permet une visualisation aussi bien sur un écran géant que sur un smartphone. Mais que se passe-t-il pour les éléments d'une page web lorsque la fenêtre diminue ou s'élargit ? On peut envisager deux hypothèses : les éléments se redimensionnent en restant positionnés, ou alors ils s'empilent quand la fenêtre devient plus étroite et se positionnent côte à côte quand elle s'élargit. Voici à la figure suivante l'exemple de la page d'accueil du site OpenClassrooms qui illustre ce phénomène avec trois situations (écran large, écran moyen et petit écran) :

Aspect sur grand écran
Aspect sur grand écran
Aspect sur écran moyen
Aspect sur écran moyen
Aspect sur petit écran
Aspect sur petit écran

Plutôt que de réduire les éléments au risque de les rendre illisibles, le choix a été fait de les empiler petit à petit quand la fenêtre devient plus étroite. Une autre option pourrait consister à supprimer des éléments pas vraiment utiles, mais nous reviendrons plus tard sur ce point. Pour le moment on va juste se demander comment on peut choisir entre les deux options présentées à la figure suivante.

Empilement ou réduction ?
Empilement ou réduction ?

C'est ici qu'interviennent les 4 sortes de classes vues précédemment pour les colonnes. Bootstrap considère 4 sortes de médias : les petits, genre smartphones (moins de 768 pixels), les moyens, genre tablettes (moins de 992 pixels), les écrans moyens (moins de 1200 pixels) et enfin les grands écrans (plus de 1200 pixels). Vous trouverez à la figure suivante un tableau pour illustrer les différences de réaction selon la catégorie.

 

Petit écran
(smartphone)

Écran réduit
(tablette)

Écran moyen
(desktop)

Grand écran
(desktop)

 

Comportement

Redimensionnement

Redimensionnement

Redimensionnement

Empilage puis redimensionnement

Classe

col-xs-*

col-sm-*

col-md-*

col-lg-*

Valeur de
référence

< 768 px

>= 768 px

>= 992 px

>= 1200 px

Le nom des classes est intuitif :xs pour x-small, sm pour small, md pour medium etlg pour large.

Un petit exemple ?

Pour avoir un élément de 4 colonnes de large accouplé avec un élément de 8 colonnes de large sur un smartphone, on a :

<div class="row">
  <div class="col-xs-4">Largeur 4</div>
  <div class="col-xs-8">Largeur 8</div>
</div>

La figure suivante illustre ce code avec l'effet quand on passe sur un écran plus grand.

Un élément de 4 colonnes à côté d'un élément de 8 colonnes
Un élément de 4 colonnes à côté d'un élément de 8 colonnes

Voici la version tablette :

<div class="row">
  <div class="col-sm-4">Largeur 4</div>
  <div class="col-sm-8">Largeur 8</div>
</div>

La figure suivante illustre ce code avec l'effet quand on passe sur un écran plus petit ou plus grand.

L'affichage change en fonction de la taille de l'écran
L'affichage change en fonction de la taille de l'écran

Et enfin, voici la version grand écran :

<div class="row">
  <div class="col-lg-4">Largeur 4</div>
  <div class="col-lg-8">Largeur 8</div>
</div>

La figure suivante illustre ce code avec l'effet quand on passe sur un écran de plus en plus petit.

La version grand écran
La version grand écran

La largeur des éléments de la grille est calculée en pourcentage selon la fenêtre de visualisation. Rien n'interdit évidemment de mélanger des classes des 3 catégories pour créer des effets particuliers avec certains éléments qui doivent s'empiler et d'autre pas (c'est même la stratégie utilisée pour la mise en page "responsive" comme nous allons bientôt le voir)…

Après cette petite mise en jambe pour vous présenter la notion de grille dans Bootstrap, on va passer en revue les possibilités dans le détail. Mais pour visualiser tous les exemples qui vont suivre, je vous propose d'ajouter un peu de style, histoire d'afficher les éléments de façon explicite. Pour éviter de polluer le code HTML on va mettre ce style spécifique dans un fichier CSS particulier (ce fichier sera nommétuto.css dans le code) :

body {
  padding-top: 10px;
}
[class*="col-"], footer {
  background-color: lightgreen;
  border: 2px solid black;
  border-radius: 6px;
  line-height: 40px;
  text-align: center;
}

Le seul but de ces règles de style est de faire apparaître nettement les éléments à l'écran. Une petite marge interne en haut pour le corps, pour éviter que tout soit collé en haut de l'écran. Des bordures (avec des coins arrondis pour l'esthétique) et un fond coloré pour distinguer les éléments. Une hauteur fixée à 40 pixels, parce qu'étant donné que la hauteur des rangées dépend du contenu, on aurait un rendu hétéroclite. La figure suivant présente l'aspect obtenu.

Le résultat final
Le résultat final

La grille en pratique

Le conteneur

La grille de Bootstrap doit être placée dans un conteneur. Bootstrap propose les classescontainer etcontainer-fluid. Leur utilisation était auparavant optionnelle. Il est désormais clairement indiqué dans la documentation qu'il faut la mettre en œuvre systématiquement si on veut obtenir des alignements et des espacements corrects. La classecontainer contient et centre la grille sur une largeur fixe, qui s'adapte en fonction de la largeur de l'écran. La classecontainer-fluid permet à la grille d'occuper toute la largeur. Dans les exemples de ce chapitre, je vais utiliser systématiquementcontainer pour avoir une visualisation plus facile des éléments. Ce conteneur a une largeur maximale selon le média concerné, comme indiqué au tableau suivant.

 

Petit écran
(smartphone)

Ecran réduit
(tablette)

Ecran moyen
(desktop)

Grand écran
(desktop)

 

Conteneur
maximum

Automatique

750 px

970 px

1170 px

Valeur de
référence

< 768 px

>= 768 px

>= 992 px

>= 1200 px

Le centrage du conteneur est fait de façon classique avec de petites marges internes de 15 pixels et les marges droite et gauche automatiques :

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

Ce sont les mêmes règles pour la classecontainer-fluid. Ce qui est ajouté pour la classecontainer est la limite de largeur spécifiée par média :

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Remarquez l'ordre des medias, du plus étroit vers le plus large. De cette manière on a une surcharge des règles cohérente.

Une seule rangée

Dans ce premier exemple, on va déclarer une seule rangée avec deux éléments qui occupent tout l'espace :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-4">4 colonnes</div>
        <div class="col-lg-8">8 colonnes</div>
      </div>
    </div>
  </body>
</html>

Ce qui nous donne la figure suivante.

Une seule rangée avec deux éléments qui occupent tout l'espace
Une seule rangée avec deux éléments qui occupent tout l'espace

Mise en page rapide et simple non ?

Plusieurs rangées

Pour obtenir plusieurs rangées, il suffit d'utiliser plusieurs fois la classerow. Un petit exemple avec 3 rangées pour voir l'effet :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-1">1 col</div>
        <div class="col-lg-2">2 colonnes</div>
        <div class="col-lg-3">3 colonnes</div>
        <div class="col-lg-6">6 colonnes</div>
      </div>
      <div class="row">
        <div class="col-lg-12">12 colonnes</div>
      </div>
      <div class="row">
        <div class="col-lg-4">4 colonnes</div>
        <div class="col-lg-8">8 colonnes</div>
      </div>
    </div>
  </body>
</html>

Ce qui nous donne la figure suivante.

Trois rangées

Sauter des colonnes

Bootstrap permet aussi de sauter des colonnes. Il y a quelques classes d'offset pour ça :

  • col-*-offset-1

  • col-*-offset-2

  • ...

  • col-*-offset-11

Ces classes se contentent d'ajouter une marge gauche. Par exemple :

.col-lg-offset-6 {
  margin-left: 50%;
}

Dans ce cas, 6 colonnes représentent la moitié de la fenêtre donc 50%. Voici un exemple :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-3">3 colonnes</div>
        <div class="col-lg-6">6 colonnes</div>
        <div class="col-lg-3">3 colonnes</div>
      </div>
      <div class="row">
        <div class="col-lg-3">3 colonnes</div>
        <div class="col-lg-offset-6 col-lg-3">3 colonnes</div>
      </div>
    </div>
  </body>
</html>

Voici le résultat à la figure suivante.

On a sauté des colonnes
On a sauté des colonnes

On a sauté 6 colonnes grâce à la classecol-lg-offset-6. On peut évidemment multiplier les sauts :

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-lg-offset-1">2 colonnes</div>
    <div class="col-lg-4 col-lg-offset-2">4 colonnes</div>
    <div class="col-lg-2 col-lg-offset-1">2 colonnes</div>
  </div>
</div>

Voici le résultat à la figure suivante.

On a sauté des colonnes plusieurs fois

Imbrication d'éléments

On doit souvent imbriquer des éléments dans une page web, est-ce possible avec Bootstrap ? Autrement dit inclure unrow dans uncol. Eh bien, on va tester ça tout de suite :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-8">8 colonnes
          <div class="row">
            <div class="col-lg-3">3 colonnes</div>
            <div class="col-lg-6">6 colonnes</div>
            <div class="col-lg-3">3 colonnes</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Voici le résultat à la figure suivante.

On a imbriqué des rangées
On a imbriqué des rangées

On dirait bien que ça fonctionne !

Les imbrications peuvent s'enchaîner pour répondre à des besoins complexes :

<div class="container">
  <div class="row">
    <div class="col-md-12">Premier niveau avec 12 colonnes
    <div class="row">
      <div class="col-md-8">Second niveau avec 8 colonnes
      <div class="row">
        <div class="col-md-4">Troisième niveau avec 4 colonnes</div>
        <div class="col-md-6 col-md-offset-2">Troisième niveau avec 6 colonnes
        <div class="row">
          <div class="col-md-3 col-md-offset-1">Quatrième niveau avec 3 colonnes</div>
          <div class="col-md-5 col-md-offset-1">Quatrième niveau avec 5 colonnes</div>
        </div>
        </div>
      </div>
      </div>
      <div class="col-md-4">Second niveau avec 4 colonnes</div>
    </div>
  </div>
</div>

Voici le résultat à la figure suivante.

Une imbrication complexe avec des sauts de colonnes

Ordre des colonnes

Très logiquement, les colonnes s'affichent dans l'ordre du flux. Il peut arriver qu'on veuille bouleverser cet ordre. Regardez cet exemple :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">12 colonnes
          <div class="row">
            <div class="col-lg-2 col-lg-push-8">Colonne 1</div>
            <div class="col-lg-2 col-lg-push-3">Colonne 2</div>
            <div class="col-lg-2 col-lg-pull-2">Colonne 3</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Et voici le résultat à la figure suivante.

On peut choisir l'ordre des colonnes
On peut choisir l'ordre des colonnes

La classecol-lg-push-* permet de décaler une colonne vers la droite et la classecol-lg-pull-* fait l'inverse.

Un petit TP

Pour vous entraîner, je vous propose d'obtenir le résultat visible à la figure suivante.

Essayez d'obtenir ce résultat
Essayez d'obtenir ce résultat

Donc deux zones séparées avec un offset de 4 colonnes dans la partie gauche.

Voici la solution :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-6">6 colonnes
          <div class="row">
            <div class="col-lg-4">4 colonnes</div>
            <div class="col-lg-offset-4 col-lg-4">4 colonnes</div>
          </div>
        </div>
        <div class="col-lg-6">6 colonnes
          <div class="row">
            <div class="col-lg-4">4 colonnes</div>
            <div class="col-lg-8">8 colonnes</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Mise en page

L'intérêt principal d'une grille est de réaliser une mise en page. Nous allons voir quelques exemples pour structurer correctement une page.

Premier cas

Commençons par quelque chose de simple avec une en-tête, un menu à gauche, une section à droite et un pied de page :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <header class="row">
        <div class="col-lg-12">
          Entete
        </div>
      </header>
      <div class="row">
        <nav class="col-lg-2">
          Menu
        </nav>
        <section class="col-lg-10">
          Section
        </section>
      </div>
      <footer class="row">
          Pied de page
      </footer>
    </div>
  </body>
</html>

Le résultat se trouve à la figure suivante.

Une mise en page simple
Une mise en page simple

J'ai utilisé les classes pour grand écran avec les classecol-lg-*, ce qui fait qu'à la réduction, je me retrouve avec un empilage dès que je passe en dessous de 1200 pixels (voir figure suivante).

Empilage à la réduction de l'affichage
Empilage à la réduction de l'affichage

Si je veux que ma mise en forme reste stable aussi pour les écrans moyens, comment faire ? Il me suffit d'utiliser les classescol-md-* à la place decol-lg-*, ce qui a pour effet de déplacer la limite à 992 pixels. De la même façon, l'utilisation des classescol-sm-* déplace la limite à 768 pixels…

J'ai le même résultat sans utiliser la classecol-lg-12, est-elle vraiment utile ?

On obtient effectivement la même mise en page, mais les classescol-* ont un padding droite et gauche de 15 pixels, et si on n'utilise pas la classecol-lg-12, on va avoir une incohérence au niveau de l'affichage du contenu.

Second cas

Considérons maintenant un cas un peu plus riche :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <header class="row">
        <div class="col-sm-12">
          Entete
        </div>
      </header>
      <div class="row">
        <nav class="col-sm-2">
          Menu
        </nav>
        <section class="col-sm-10">
          Section
          <div class="row">
            <article class="col-md-10">
              Article
            </article>
            <aside class="col-md-2">
              Aside
            </aside>
          </div>
        </section>
      </div>
      <footer class="row">
        <div class="col-sm-12">
          Pied de page
        </div>
      </footer>
    </div>
  </body>
</html>

Le résultat se trouve à la figure suivante.

Une mise en page plus riche
Une mise en page plus riche

On a conservé l'en-tête et le pied de page, ainsi que le menu, mais on a intégré dans le contenu unarticle et unaside. L'ensemble est prévu pour fonctionner sur desktop (grand et petit). Pour les tablettes, on se retrouve avec un empilage pour le contenu de la section (utilisation de classescol-md-* pourarticle etaside), comme à la figure suivante.

Résultat sur une tablette
Résultat sur une tablette

Et comme on n'a rien prévu de spécial pour les smartphones, tout s'empile (voir figure suivante).

Résultat sur un smartphone
Résultat sur un smartphone

Troisième cas

Enrichissons encore la mise en page :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
    <style type="text/css">
     /* Style pour l'exemple*/
      article.col-sm-10, nav.col-sm-2 {
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="row">
        <div class="col-lg-12">
          Entete
        </div>
      </header>
      <div class="row">
        <nav class="col-sm-2">
          Menu
        </nav>
        <section class="col-sm-10">
          Section
          <div class="row">
            <article class="col-sm-10">
              Article
            </article>
            <div class="col-sm-2">
              <div class="row">
                <aside class="col-sm-12">
                  Aside 1
                </aside>
                <aside class="col-sm-12">
                  Aside 2
                </aside>
              </div>
            </div>
          </div>
        </section>
      </div>
      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>
    </div>
  </body>
</html>

Le résultat se trouve à la figure suivante.

Une mise en page plus complexe
Une mise en page plus complexe

Maintenant nous avons 2asides à côté de l'article. Pour y arriver, il faut 2 niveaux d'imbrication. On a aussi un empilage complet à la réduction, comme le montre la figure suivante.

Résultat à la réduction
Résultat à la réduction

Pourquoi l'en-tête et le pied de page ont maintenant la classecol-lg-12, alors que dans l'exemple précédent on avaitcol-sm-12?

Comme la largeur est de 12 colonnes, tout ce qui nous intéresse est le centrage, que ces 2 classes possèdent en commun, sans influence du média utilisé. On peut donc utiliser indifféremment ces 2 classes dans notre cas.

Quatrième cas

Terminons avec un cas plus fourni :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
    <style type="text/css">
     /* Style pour l'exemple*/
      footer {
        border: 0;
      }
      article.col-sm-6, nav.col-sm-2 {
        line-height: 60px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="row">
        <div class="col-lg-12">
          Entete
        </div>
      </header>
      <div class="row">
        <nav class="col-sm-2">
          Menu
        </nav>
        <section class="col-sm-10">
          Section
          <div class="row">
            <div class="col-sm-10">
              <div class="row">
                <article class="col-sm-6">
                  Article
                </article>
                <article class="col-sm-6">
                  Article
                </article>
                <article class="col-sm-6">
                  Article
                </article>
                <article class="col-sm-6">
                  Article
                </article>
                <article class="col-sm-6">
                  Article
                </article>
                <article class="col-sm-6">
                  Article
                </article>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="row">
                <aside class="col-sm-12">
                  Aside 1
                </aside>
                <aside class="col-sm-12">
                  Aside 2
                </aside>
              </div>
            </div>
          </div>
        </section>
        <section class="col-sm-offset-2 col-sm-10">
          Section
          <div class="row">
            <article class="col-sm-6">
              Article
            </article>
            <article class="col-sm-6">
              Article
            </article>
            <article class="col-sm-6">
              Article
            </article>
            <article class="col-sm-6">
              Article
            </article>
            <article class="col-sm-6">
              Article
            </article>
            <article class="col-sm-6">
              Article
            </article>
          </div>
        </section>
      </div>
      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>
    </div>
  </body>
</html>

Le résultat se trouve à la figure suivante.

Une mise en page très chargée
Une mise en page très chargée

Dans les 2 sections, j'ai mis 6 articles d'une largeur de 6 colonnes qui se positionnent parfaitement. Il n'est pas utile de créer 3 rangées. Dans la deuxième section, je n'ai pas mis d'aside pour montrer un mélange de compositions. Le décalage de la deuxième section pour tenir compte de la largeur du menu se fait tout simplement avec une classe d'offset. En ce qui concerne le choix des classes pour les colonnes je me suis arrangé pour que la première section garde sa structure quand on rétrécit.

Vous avez pu voir avec ces quelques exemples qu'on peut obtenir facilement une structure de page aussi complexe que l'on veut. Le point le plus délicat demeure le choix des classes pour les colonnes en fonction du résultat que l'on désire selon les médias utilisés. Dans tous les cas, il faut tester les différents formats parce que le rendu ne donne pas forcément du premier coup ce que l'on avait prévu. Si vous n'y parvenez pas avec une seule classe, alors la solution est d'en combiner plusieurs, c'est ce que nous allons voir bientôt…

En résumé

  • Bootstrap propose une grille pour positionner tous les éléments des pages web.

  • La grille est versatile et permet de nombreuses combinaisons comme des inclusions, des sauts de colonnes.

  • La grille rend possible également une adaptation selon les dimensions du support de visualisation en réorganisant les éléments ou en masquant certains.

Exemple de certificat de réussite
Exemple de certificat de réussite