diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 8bc5c9358b..7f1bf5cd8b 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2981,6 +2981,15 @@ a.list-group-item.active .list-group-item-text {
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;
}
diff --git a/docs/components.html b/docs/components.html
index 23c20d94d3..01b76d8123 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -2426,6 +2426,21 @@ body {
Panel heading
Panel content
+{% endhighlight %}
+
+
+ Wrap buttons or secondary text in .panel-footer
.
+
+{% highlight html %}
+
+ Panel content
+
+
{% endhighlight %}
Contextual alternatives
diff --git a/less/panels.less b/less/panels.less
index 0d5a07ad40..a08febef3f 100644
--- a/less/panels.less
+++ b/less/panels.less
@@ -25,6 +25,16 @@
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;
diff --git a/less/variables.less b/less/variables.less
index cb07c83073..4feb9879a0 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -331,6 +331,7 @@
@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;