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;
}
<h3 id="panels-alternatives">Contextual alternatives</h3>
<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
<div class="bs-docs-example">
+ <div class="panel panel-primary">
+ <div class="panel-heading">Panel heading</div>
+ Panel content
+ </div>
<div class="panel panel-success">
<div class="panel-heading">Panel heading</div>
Panel content
</div>
</div>
{% highlight html linenos %}
+<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
}
// 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 {
@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;