border-top-left-radius: 3px;
}
+.panel-footer {
+ padding: 10px 15px;
+ margin: 15px -15px -15px;
+ background-color: #f5f5f5;
+ border-top: 1px solid #dddddd;
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+}
+
.panel-primary {
border-color: #428bca;
}
<div class="panel-heading">Panel heading</div>
Panel content
</div>
+{% endhighlight %}
+
+ <h3 id="panels-footer">Panel with footer</h3>
+ <p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
+ <div class="bs-example">
+ <div class="panel">
+ Panel content
+ <div class="panel-footer">Panel footer</div>
+ </div>
+ </div>
+{% highlight html %}
+<div class="panel">
+ Panel content
+ <div class="panel-footer">Panel footer</div>
+</div>
{% endhighlight %}
<h3 id="panels-alternatives">Contextual alternatives</h3>
border-top-right-radius: (@panel-border-radius - 1);
}
+// Optional footer (stays gray in every modifier class)
+.panel-footer {
+ margin: 15px -15px -15px;
+ padding: 10px 15px;
+ background-color: @panel-footer-bg;
+ border-top: 1px solid @panel-border;
+ border-bottom-left-radius: (@panel-border-radius - 1);
+ border-bottom-right-radius: (@panel-border-radius - 1);
+}
+
// Contextual variations
.panel-primary {
border-color: @panel-primary-border;
@panel-border: #ddd;
@panel-border-radius: @border-radius-base;
@panel-heading-bg: #f5f5f5;
+@panel-footer-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;