Bootstrap est un « cadriciel »! C’est-à-dire une librairie de styles et d’interface usager écrits en CSS pour tout type de pages HTML. Une interface usager ou IU est un élément de la page qui permet une interaction, physique ou visuelle, avec l’usager. Boutons, encart, carte, tableaux, entêtes, alerte, pastille, badge, liens, images...

Développé à l’origine par Twitter, il est aujourd’hui le plus rependu. Utiliser les codes suivant dans vos page vous assure une ergonomie des plus populaire mais aussi une portabilité qui va bien au delà de Neural. Voici une liste des éléments les plus susceptibles d’augmenter la valeur de vos pages Web. Vous pouvez copier-coller les exemples suivants directement dans vos pages Web. En fait, l’ensemble du cadriciel Bootstrap est disponible.

NOTE : Le résultat et les couleurs peuvent différer légèrement selon les sites Web.

Pour plus d’information sur les éléments visuels de l’interface usager (IU) Bootstrap, consultez le site officiel de Bootstrap (en anglais)

Couleurs Exemple

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

Code source

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-white">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>

Gros texte Exemple

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code source

<p class="lead">
  ...
</p>

Commentaires Exemple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Source de Lorem ipsum

Code source

<blockquote>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  <footer class="blockquote-footer">Source de <cite title="Source Title">Lorem ipsum</cite></footer>
</blockquote>
<

Images Exemple

Code source

<img src="...jpg" class="img-fluid rounded" alt="Exemple arrondi" />
<img src="...jpg" class="img-fluid img-thumbnail" alt="Exemple encadré" />

Tableaux Exemple

Liste des usagers
#	Prénom	Nom	Identifiant	-
1	Mark	Otto	@mdo	-
2	Jacob	Thornton	@fat	-
3	Larry	the Bird	@twitter	-
...
...
...
...
...
...
...

Code source

<table class="table table-striped table-bordered table-hover table-sm">
  <caption>Liste des usagers</caption>
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Prénom</th>
      <th scope="col">Nom</th>
      <th scope="col">Identifiant</th>
      <th>-</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>-</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
      <td>-</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
      <td>-</td>
    </tr>
    <tr class="table-primary"><td colspan="5">...</td></tr>
    <tr class="table-secondary"><td colspan="5">...</td></tr>
    <tr class="table-success"><td colspan="5">...</td></tr>
    <tr class="table-danger"><td colspan="5">...</td></tr>
    <tr class="table-warning"><td colspan="5">...</td></tr>
    <tr class="table-info"><td colspan="5">...</td></tr>
    <tr class="table-light"><td colspan="5">...</td></tr>
  </tbody>
</table>

Alertes Exemple

Une alerte « primary » avec un exemple de lien. Cliquer si vous voulez.

Une alerte « secondary » avec un exemple de lien. Cliquer si vous voulez.

Une alerte « success » avec un exemple de lien. Cliquer si vous voulez.

Une alerte « danger » avec un exemple de lien. Cliquer si vous voulez.

Une alerte « warning » avec un exemple de lien. Cliquer si vous voulez.

Une alerte « info » avec un exemple de lien. Cliquer si vous voulez.

Une alerte « light » avec un exemple de lien. Cliquer si vous voulez.

Une alerte « dark » avec un exemple de lien. Cliquer si vous voulez.

Code source

<div class="alert alert-primary" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-secondary" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-success" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-danger" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-warning" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-info" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-light" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-dark" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

Autres alertes Exemple

Réussi !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Code source

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Réussi !</h4>
  <p>...</p>
  <hr>
  <p class="mb-0">...</p>
</div>

Avec bouton « fermer » Exemple

Attention Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code source

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Attention</strong> ...
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

Notification Exemple

Code source

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

<button type="button" class="btn btn-primary">
  <span class="badge badge-light">9</span>
  <span class="sr-only">Messages</span>
</button>

Badges Exemple

Primaire Secondaire Succès Danger Attention Information Claire Foncé

Code source

<span class="badge badge-primary">Primaire</span>
<span class="badge badge-secondary">Secondaire</span>
<span class="badge badge-success">Succès</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Attention</span>
<span class="badge badge-info">Information</span>
<span class="badge badge-light">Claire</span>
<span class="badge badge-dark">Foncé</span>

Pastilles Exemple

Primaire Secondaire Succès Danger Attention Information Claire Foncé

Code source

<span class="badge badge-pill badge-primary">Primaire</span>
<span class="badge badge-pill badge-secondary">Secondaire</span>
<span class="badge badge-pill badge-success">Succès</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Attention</span>
<span class="badge badge-pill badge-info">Information</span>
<span class="badge badge-pill badge-light">Claire</span>
<span class="badge badge-pill badge-dark">Foncé</span>

Hyperliens Exemple

Primaire Secondaire Succès Danger Attention Information Claire Foncé

Code source

<a href="#" class="badge badge-primary">Primaire</a>
<a href="#" class="badge badge-secondary">Secondaire</a>
<a href="#" class="badge badge-success">Succès</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Attention</a>
<a href="#" class="badge badge-info">Information</a>
<a href="#" class="badge badge-light">Claire</a>
<a href="#" class="badge badge-dark">Foncé</a>

Boutons Exemple

Code source

<button type="button" class="btn btn-primary">Primaire</button>
<button type="button" class="btn btn-secondary">Secondaire</button>
<button type="button" class="btn btn-success">Succès</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Attention</button>
<button type="button" class="btn btn-info">Information</button>
<button type="button" class="btn btn-light">Claire</button>
<button type="button" class="btn btn-dark">Foncé</button>
<button type="button" class="btn btn-link">Lien</button>

Boutons contours Exemple

Code source

<button type="button" class="btn btn-outline-primary">Primaire</button>
<button type="button" class="btn btn-outline-secondary">Secondaire</button>
<button type="button" class="btn btn-outline-success">Succès</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Attention</button>
<button type="button" class="btn btn-outline-info">Information</button>
<button type="button" class="btn btn-outline-light">Claire</button>
<button type="button" class="btn btn-outline-dark">Foncé</button>

Boutons grosseur Exemple

Code source

<button type="button" class="btn btn-primary btn-lg">Gros bouton</button>
<button type="button" class="btn btn-secondary btn-lg">Gros bouton</button>

<button type="button" class="btn btn-primary btn-sm">Petit bouton</button>
<button type="button" class="btn btn-secondary btn-sm">Petit bouton</button>

<button type="button" class="btn btn-primary btn-lg btn-block">Bouton 100%</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Bouton 100%</button>

Carte Exemple

Titre de la carte

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Cliquer

Code source

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Image">
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
    <a href="#" class="btn btn-primary">Cliquer</a>
  </div>
</div>

Carte avec liens Exemple

Services

Accueil Librairie Édition

Code source

<div class="card">
  <div class="card-header">
    Services
  </div>
  <div class="list-group">
    <a href="..." class="list-group-item"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Accueil</a>
    <a href="..." class="list-group-item"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Librairie</a>
    <a href="..." class="list-group-item"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Édition</a>
  </div>
</div>

Carte avec fond coloré Exemple

Entête

Titre (primaire)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (secondaire)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (succès)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (danger)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (attention)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (information)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (claire)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (foncé)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code source

<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>

Carte : texte sur image Exemple

Titre de la carte

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Mise à jour il y a 3 jours

Code source

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Image">
  <div class="card-img-overlay">
    <h3 class="card-title">..</h3>
    <p class="lead card-text">...</p>
    <p class="card-text">...</p>
  </div>
</div>

Info-bulle Exemple

Exemple d’info-bulle

Code source

<a href="#" class="btn btn-secondary" data-toggle="tooltip" title="Exemple d’info-bulle">
  Exemple d’info-bulle
</a>

Grille Exemple

L’exemple suivant a deux colonnes par défaut. On a le même résultat en ajoutant « 6 » au bout de la classe : col-6. Voir le prochain exemple pour plus de détail.

Première de deux colonnes col

Deuxième de deux colonnes col

Première de deux colonnes col-6

Deuxième de deux colonnes col-6

Code source

<div class="row">
  <div class="col">
    Première de deux colonnes
  </div>
  <div class="col">
    Deuxième de deux colonnes
  </div>
</div>

Comme la classe col-6

<div class="row">
  <div class="col-6">
    Première de deux colonnes
  </div>
  <div class="col-6">
    Deuxième de deux colonnes
  </div>
</div>

Le système de grille (grid) de Bootstrap est l’une de ces fonctionnalités les plus puissantes, mais en même temps des plus complexe. Pour plus de détail, consultez la section « Grid system ».

Grille avec nombre de colonnes Exemple

Le cadriciel Bootstrap base son système de grille sur 12 colonnes! Les 12 classes de col-1, la plus petite des 12 colonnes, à la classe col-12 pour forcer la largeur maximum de la grille. Ce qui fausse un peu la lecture. Par exemple la classe nécessaire pour 3 colonnes s’écrit col-4 (1/3) alors que la classe pour 4 colonnes col-3 (1/4)!

1 col-3Première de quatre colonnes col-3

2 col-3Deuxième de trois colonnes col-3

3 col-3Troisième de quatre colonnes col-3

4 col-3Quatrième de quatre colonnes col-3

Code source

<div class="row">
  <div class="col-3">
    Première colonne
  </div>
  <div class="col-3">
    Deuxième colonne
  </div>
  <div class="col-3">
    Troisième colonne
  </div>
  <div class="col-3">
    Quatrième colonne
  </div>
</div>

Grille adaptativeExemple

1 Mobile col-sm

2 Mobile col-sm

3 Mobile col-sm

1 Tablette col-md-4

2 Tablette col-md-4

3 Tablette col-md-4

1 Portable col-lg-6

2 Portable col-lg-6

Code source

<div class="row">
  <div class="col-sm">
    Première de trois colonnes
  </div>
  <div class="col-sm">
    Deuxième de trois colonnes
  </div>
  <div class="col-sm">
    Troisième de trois colonnes
  </div>
</div>

ou

<div class="row">
  <div class="col-md-4">
    Première de trois colonnes
  </div>
  <div class="col-md-4">
    Deuxième de trois colonnes
  </div>
  <div class="col-md-4">
    Troisième de trois colonnes
  </div>
</div>

ou

<div class="row">
  <div class="col-lg-6">
    Première de deux colonnes
  </div>
  <div class="col-lg-6">
    Deuxième de deux colonnes
  </div>
</div>

L’aspect ou le caractère adaptatif permet d’optimiser l’affichage sur les tablettes et mobiles en positionnant chaque cellule une en dessous des autres. Dans l’exemple précédent, le « sm » indique « small » pour le mobile. Il y a aussi col-md (médium ou tablette) col-lg (large portable) col-xl (extra-large bureau). Le nombre de colonnes par ligne peut aussi être spécifié en ajoutant le numéro de la colonne : col-sm-6 par exemple. Pour plus de détail, consultez la section « Grid system ».

Dernière mise à jour 2017-11-21