Change error to danger for all classes; add panels component

4 files changed, 144 insertions, 10 deletions

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 682bf75aa..649cad06a 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -163,6 +163,7 @@
       </ul>
     </li>
     <li><a href="#media">Media object</a></li>
+    <li><a href="#panels">Panels</a></li>
     <li><a href="#wells">Wells</a></li>
 
     <!-- JavaScript -->
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4f034974a..b86a16a78 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -383,12 +383,12 @@ a.text-warning:focus {
   color: #a47e3c;
 }
 
-.text-error {
+.text-danger {
   color: #b94a48;
 }
 
-a.text-error:hover,
-a.text-error:focus {
+a.text-danger:hover,
+a.text-danger:focus {
   color: #953b39;
 }
 
@@ -1119,9 +1119,9 @@ table th[class*="col-span-"] {
   border-color: #d6e9c6;
 }
 
-.table > tbody > tr > td.error,
-.table > tbody > tr > th.error,
-.table > tbody > tr.error > td {
+.table > tbody > tr > td.danger,
+.table > tbody > tr > th.danger,
+.table > tbody > tr.danger > td {
   background-color: #f2dede;
   border-color: #eed3d7;
 }
@@ -1140,9 +1140,9 @@ table th[class*="col-span-"] {
   border-color: #c9e2b3;
 }
 
-.table-hover > tbody > tr > td.error:hover,
-.table-hover > tbody > tr > th.error:hover,
-.table-hover > tbody > tr.error:hover > td {
+.table-hover > tbody > tr > td.danger:hover,
+.table-hover > tbody > tr > th.danger:hover,
+.table-hover > tbody > tr.danger:hover > td {
   background-color: #ebcccc;
   border-color: #e6c1c7;
 }
@@ -2944,6 +2944,68 @@ fieldset[disabled] .btn-link:focus {
   z-index: 1051;
 }
 
+.panel {
+  padding: 15px;
+  margin-bottom: 20px;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.panel-heading {
+  padding: 10px 15px;
+  margin: -15px -15px 15px;
+  font-size: 16px;
+  font-size: 1.6rem;
+  font-weight: 500;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #dddddd;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
+.panel-success {
+  border-color: #d6e9c6;
+}
+
+.panel-success .panel-heading {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.panel-warning {
+  border-color: #fbeed5;
+}
+
+.panel-warning .panel-heading {
+  color: #c09853;
+  background-color: #fcf8e3;
+  border-color: #fbeed5;
+}
+
+.panel-danger {
+  border-color: #eed3d7;
+}
+
+.panel-danger .panel-heading {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #eed3d7;
+}
+
+.panel-info {
+  border-color: #bce8f1;
+}
+
+.panel-info .panel-heading {
+  color: #3a87ad;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+
 .well {
   min-height: 20px;
   padding: 19px;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 6b576de2a..181a3a734 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -309,7 +309,9 @@ section > ul li {
 .bs-docs-example > textarea:last-child,
 .bs-docs-example > .table:last-child,
 .bs-docs-example > .jumbotron:last-child,
-.bs-docs-example > .alert:last-child {
+.bs-docs-example > .alert:last-child,
+.bs-docs-example > .panel:last-child,
+.bs-docs-example > .well:last-child {
   margin-bottom: 0;
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index 4b2629658..00af4ed0c 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4369,6 +4369,75 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
+  <!-- Panels
+  ================================================== -->
+  <div class="bs-docs-section" id="panels">
+    <div class="page-header">
+      <h1>Panels</h1>
+    </div>
+    <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
+
+    <h3>Basic panel</h3>
+    <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
+    <div class="bs-docs-example">
+      <div class="panel">
+        Basic panel example
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel">
+  Basic panel example
+</div>
+{% endhighlight %}
+
+    <h3>Panel with heading</h3>
+    <p>Easily add a heading to your panel with <code>.panel-heading</code>. Use it on a <code>&lt;div&gt;</code> or any heading element (e.g., <code>&lt;h3&gt;</code>).</p>
+    <div class="bs-docs-example">
+      <div class="panel">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel">
+  <div class="panel-heading">Panel heading</div>
+  Panel content
+</div>
+{% endhighlight %}
+
+    <h3>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-success">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+      <div class="panel panel-warning">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+      <div class="panel panel-danger">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+      <div class="panel panel-info">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel panel-success">...</div>
+<div class="panel panel-warning">...</div>
+<div class="panel panel-danger">...</div>
+<div class="panel panel-info">...</div>
+{% endhighlight %}
+
+  </div>
+
+
+
+
+
   <!-- Wells
   ================================================== -->
   <div class="bs-docs-section" id="wells">