Panel

Voeg een kop toe met .panel-heading. Je kunt daarbinnen elke <h1>-<h6> met een .panel-title class plaatsen om een pre-styled heading te krijgen. Let op, de font-sizes van de <h1>-<h6> wordt overschreven door de .panel-heading.

Voeg een footer toe met ‘.panel-footer`. Let op, de panel footer erft geen kleuren en randen wanneer ‘contextual variations’ worden gebruikt.

<!-- Default -->
        <div class="panel panel-default">
    <div class="panel-heading">
        Standaard panel
    </div>
    <div class="panel-body">
        <p>Panel content</p>
    </div>
</div>

<!-- Footer -->
        <div class="panel panel-default">
    <div class="panel-heading">
        <h1 class="panel-title">
            H1 Panel title
        </h1>
    </div>
    <div class="panel-body">
        <p>Panel content</p>
    </div>
    <div class="panel-footer">
        Panel footer
    </div>
</div>

<!-- Primary -->
        <div class="panel panel-primary">
    <div class="panel-heading">
        Panel contextual primary
    </div>
    <div class="panel-body">
        <p>Panel content</p>
    </div>
    <div class="panel-footer">
        Panel footer
    </div>
</div>

<!-- Success -->
        <div class="panel panel-success">
    <div class="panel-heading">
        Panel contextual success
    </div>
    <div class="panel-body">
        <p>Panel content</p>
    </div>
    <div class="panel-footer">
        Panel footer
    </div>
</div>

<!-- Info -->
        <div class="panel panel-info">
    <div class="panel-heading">
        Panel contextual info
    </div>
    <div class="panel-body">
        <p>Panel content</p>
    </div>
    <div class="panel-footer">
        Panel footer
    </div>
</div>

<!-- Warning -->
        <div class="panel panel-warning">
    <div class="panel-heading">
        Panel contextual warning
    </div>
    <div class="panel-body">
        <p>Panel content</p>
    </div>
    <div class="panel-footer">
        Panel footer
    </div>
</div>

<!-- Danger -->
        <div class="panel panel-danger">
    <div class="panel-heading">
        Panel contextual danger
    </div>
    <div class="panel-body">
        <p>Panel content</p>
    </div>
    <div class="panel-footer">
        Panel footer
    </div>
</div>


  {% if title -%}
    
      {% if header -%}
        <{{ header }} class="panel-title">
          {{ title }}
        
      {% else -%}
        {{ title }}
      {% endif -%}
    
  {% endif -%}
  
    {{ body }}
  
  {% if footer -%}
    
      {{ footer }}
    
  {% endif -%}




/* Default */
title: Standaard panel
body: Panel content
modifier: default



/* Footer */
title: H1 Panel title
body: Panel content
modifier: default
header: h1
footer: Panel footer



/* Primary */
title: Panel contextual primary
body: Panel content
modifier: primary
footer: Panel footer



/* Success */
title: Panel contextual success
body: Panel content
modifier: success
footer: Panel footer



/* Info */
title: Panel contextual info
body: Panel content
modifier: info
footer: Panel footer



/* Warning */
title: Panel contextual warning
body: Panel content
modifier: warning
footer: Panel footer



/* Danger */
title: Panel contextual danger
body: Panel content
modifier: danger
footer: Panel footer