Bootstrap - Add a box (Panel) in a text

Written by Pascal Bangerter

 

To improve the presentation of a part of the text of an article, it's sometimes interesting to isolate it in a box.

Heading text in the box
Body text in the box

To create these boxes we can use a Bootstrap Panel.
More information about this panels https://getbootstrap.com/components/#panels


The panels are boxes divided in three parts : Heading, Body and footer (the Header and the footer are optional).

Sample:

Heading text
Body text
Body text

To create these boxes it will be necessary to do a little bit of HTML and
for that, it will be necessary to go from the visual mode of the editor to the HTML mode.

For change the editor mode, click on the button,   on the right under the editor.

Move your cursor where you want to insert the box and insert the following code.

<div class="panel panel-default">
  <div class="panel-heading">
     Header text of the box
  </div>
  <div class="panel-body">
    Body text of the box
  </div>
  <div class="panel-footer">
     Footer text of the box
  </div>
</div>

The header block

<div class="panel-heading">
   Header text of the box
</div>

and/or the footer block

<div class="panel-footer"> 
   Insert here the footer text of the box
</div>

can be deleted if necessary.

Result:

Header text of the box
Body text of the box

Without Header block

Body text of the box

Without the footer block (only body text)

Body text of the box

The color of the box can be modified by changing the class of the first HTML tag <div>

The colors of the boxes depend on the stylesheet of your theme.
<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
Body text of the box
Success
Body text of the box
Info
Body text of the box
Warning
Body text of the box
Danger
Body text of the box
Category: