diff --git a/assets/css/docs.css b/assets/css/docs.css
index ecf1d8501a..0991aca3d4 100644
--- a/assets/css/docs.css
+++ b/assets/css/docs.css
@@ -261,6 +261,7 @@ body {
 .bs-callout {
   margin: 20px 0;
   padding: 15px 30px 15px 15px;
+  border-left: 5px solid #eee;
 }
 .bs-callout h4 {
   margin-top: 0;
@@ -276,15 +277,15 @@ body {
 /* Themes for different contexts */
 .bs-callout-danger {
   background-color: #fcf2f2;
-  border-left: 5px solid #df7c7b;
+  border-color: #dFb5b4;
 }
 .bs-callout-warning {
   background-color: #fefbed;
-  border-left: 5px solid #f5d659;
+  border-color: #f1e7bc;
 }
 .bs-callout-info {
   background-color: #f0f7fd;
-  border-left: 5px solid #55a9e1;
+  border-color: #d0e3f0;
 }
 
 
diff --git a/javascript.html b/javascript.html
index b4e053056a..0336b379bc 100644
--- a/javascript.html
+++ b/javascript.html
@@ -1554,7 +1554,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
   </a>
 </div>
 {% endhighlight %}
-<div class="bs-callout">
+<div class="bs-callout bs-callout-info">
   <h4>Glyphicon Alternative</h4>
   <p>With <a href="/css/#glyphicons">Glyphicons</a> available, you may choose to style the left and right toggle buttons with <code>.glyphicon-chevron-left</code> and <code>.glyphicon-chevron-right</code>.</p>
 </div>