diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index c59d1aae74..76b5ec31df 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3033,6 +3033,16 @@ a.list-group-item.active .list-group-item-text {
border-top-left-radius: 3px;
}
+.panel-primary {
+ border-color: #428bca;
+}
+
+.panel-primary .panel-heading {
+ color: #ffffff;
+ background-color: #428bca;
+ border-color: #428bca;
+}
+
.panel-success {
border-color: #d6e9c6;
}
diff --git a/docs/docs.html b/docs/docs.html
index 88f272c15c..94826ffde8 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4578,6 +4578,10 @@ For example, <section>
should be wrapped as inline.
Contextual alternatives
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
+
+
Panel heading
+ Panel content
+
Panel heading
Panel content
@@ -4596,6 +4600,7 @@ For example,
<section>
should be wrapped as inline.
{% highlight html linenos %}
+...
...
...
...
diff --git a/less/panels.less b/less/panels.less
index a74feccaf3..fe13a278fa 100644
--- a/less/panels.less
+++ b/less/panels.less
@@ -26,6 +26,14 @@
}
// Contextual variations
+.panel-primary {
+ border-color: @panel-primary-border;
+ .panel-heading {
+ color: @panel-primary-text;
+ background-color: @panel-primary-heading-bg;
+ border-color: @panel-primary-border;
+ }
+}
.panel-success {
border-color: @panel-success-border;
.panel-heading {
diff --git a/less/variables.less b/less/variables.less
index 99f8bfb693..57a08f3b23 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -304,6 +304,10 @@
@panel-border-radius: @border-radius-base;
@panel-heading-bg: #f5f5f5;
+@panel-primary-text: #fff;
+@panel-primary-border: @brand-primary;
+@panel-primary-heading-bg: @brand-primary;
+
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;