diff --git a/_includes/note.html b/_includes/note.html
new file mode 100644
index 000000000..d2d66225c
--- /dev/null
+++ b/_includes/note.html
@@ -0,0 +1,5 @@
+<div class="note info">
+  <div>
+    <strong>Note:</strong> {{ note }}
+  </div>
+</div>
diff --git a/_includes/warning.html b/_includes/warning.html
new file mode 100644
index 000000000..7b6d63d5b
--- /dev/null
+++ b/_includes/warning.html
@@ -0,0 +1,5 @@
+<div class="note warning">
+  <div>
+    <strong>Warning:</strong> {{ note }}
+  </div>
+</div>
diff --git a/_sass/_note.sass b/_sass/_note.sass
new file mode 100644
index 000000000..205593471
--- /dev/null
+++ b/_sass/_note.sass
@@ -0,0 +1,22 @@
+// main note class, to be used with subclasses like info and warning
+// produces a colored block similar to what bootstrap does
+.note
+  margin-top: 1em
+
+  div
+    padding: 0.5em
+    border: 2px solid transparent
+    border-radius: 2%
+    display: inline-block
+
+.info
+  div
+    color: #3a87ad
+    background-color: #d9edf7
+    border-color: #bce8f1
+
+.warning
+  div
+    color: #b94a48
+    background-color: #f2dede
+    border-color: #eed3d7
diff --git a/css/main.scss b/css/main.scss
index 75784e2ee..c2fdbed22 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -31,5 +31,5 @@ $grey-color-dark:  darken($grey-color, 25%);
 
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import
-        "general", "goup", "misc"
+        "general", "goup", "note", "misc"
 ;