Bootstrap – Ajout d’une boite (Panel) dans un texte

Afin d’améliorer la présentation d’une partie de texte il est parfois souhaité de l’isoler dans une boite.

Pour créer ces boites on peut utiliser la notion de « Panel » de Bootstrap.

Plus d’information sur la création de ces boites   https://getbootstrap.com/components/#panels


Les Panel sont des « boites » divisée en trois parties : l’entête, le corps, et le bas (l’entête et le bas étant des options facultatives).

Exemples :

Pour créer ces boites il va falloire faire un petit peu d’HTML.

Dans l’éditeur de WordPress cliquez sur l’onglet [Texte].

Positionnez vous à l’endroit ou vous désirez insérer la boite et insérer le code suivant.

<div class="panel panel-default">
  <div class="panel-heading">
     Texte de l'entête de la boite
  </div>
  <div class="panel-body">
    Texte du corps de la boite
  </div>
  <div class="panel-footer">
     Texte du bas de la boite
  </div>
</div>

Le bloc d’entête

<div class="panel-heading">
   Texte de l'entête de la boite
</div>

et/ou le bloc de bas

<div class="panel-footer"> 
   Insérez ici le texte du bas de la boite
</div>

peuvent si besoin être supprimé.

Résultat Complet:

Texte de l’entête de la boite
Texte du corps de la boite

Sans l’entête

Texte du corps de la boite

Sans le bas de boite (uniquement le corps du texte)

Texte du corps de la boite

La couleur de la boite peut être modifiée en changeant la classe de la première balise <div>

Les couleurs des boites dépendent de la feuille de style lié à votre thème.

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

 

Primary
Texte du corps de la boite
Success
Texte du corps de la boite
Info
Texte du corps de la boite
Warning
Texte du corps de la boite
Danger
Texte du corps de la boite