diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index c01f46eb..d8e0793b 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -603,6 +603,14 @@ form.well {
   background-color: #fff;
 }
 
+/* Alerts
+-------------------------- */
+#page-alert-container {
+  position: relative;
+  border-top: 1px solid #DDDDDD;
+  padding-top: 5px;
+}
+
 /* Responsive table
 ------------------------- */
 .responsive-utilities th small {
@@ -667,7 +675,6 @@ form.well {
   border: 1px solid #d6e9c6;
 }
 
-
 /* Responsive Docs
 -------------------------------------------------- */
 @media (max-width: 480px) {
@@ -872,6 +879,11 @@ form.well {
     margin: 5px;
   }
 
+  /* Page alert is show as normal alert */
+  #page-alert-container {
+    border-top-width: 0px;
+    padding: 0;
+  }
 }
 
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 381af28c..27ec7e53 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1717,6 +1717,33 @@
     </div>
   </div>
 
+  <h2>{{_i}}Page alerts{{/i}} <small>{{_i}}Show an alert on top of your page.{{/i}}</small></h2>
+  <div class="row">
+    <div class="span4">
+        <p>{{_i}}Know those nice little alerts after you save your profile? With <code>.page-alert</code> the alert will be shown on top op your page.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;body&gt;
+  &lt;div class="navbar"&gt; ... &lt;/div&gt;
+  &lt;div class="page-alert"&gt;
+    &lt;div class="alert"&gt;
+      ...
+    &lt;/div&gt;
+  &lt;/div&gt;
+</pre>
+    </div>
+    <div class="span8">
+      <div id="page-alert-container">
+        <div class="page-alert">
+          <div class="alert alert-success">
+            <a class="close">×</a>
+            <strong>{{_i}}Success!{{/i}}</strong> {{_i}}Your profile information has been saved.{{/i}}
+          </div>
+        </div>
+        <h5>Ultricies vehicula</h5>
+        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+      </div>
+    </div>
+  </div>
 </section>
 
 
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 0deeb547..88973aed 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -63,6 +63,10 @@
       <p>{{_i}}The iconic font set adds 170 new icons to Bootstrap. These icons can be used with buttons, menus, links, etc.{{/i}}</p>
       <p>{{_i}}Because these icons are a font, they can be styled just like text.{{/i}}</p>
     </div>
+    <div class="span3">
+      <h3><a href="./components.html#alerts">{{_i}}Page alerts{{/i}}</a></h3>
+      <p>{{_i}}Know those nice little alerts after you save your profile? With .page-alert the alert will be shown on top op your page.{{/i}}</p>
+    </div>
   </div>
   <div class="row">
     <div class="span3">
diff --git a/less/jasny/bootstrap.less b/less/jasny/bootstrap.less
index 8cc0b174..984ee594 100644
--- a/less/jasny/bootstrap.less
+++ b/less/jasny/bootstrap.less
@@ -20,6 +20,7 @@
 // Components: Buttons & Alerts
 @import "action-links.less";
 @import "iconic.less";
+@import "page-alert.less";
 
 // Components: Nav
 @import "navs-tabbable.less";
diff --git a/less/jasny/responsive.less b/less/jasny/responsive.less
index 5e7221cb..6adedb91 100644
--- a/less/jasny/responsive.less
+++ b/less/jasny/responsive.less
@@ -14,3 +14,6 @@
 
 // Base CSS
 @import "forms.responsive.less";
+
+// Components: Buttons & Alerts
+@import "page-alert.responsive.less";