diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 9259d26dca..a0b4f4684f 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -895,6 +895,18 @@
     padding-right: 10px;
     padding-left: 10px;
   }
+  .media .pull-left,
+  .media .pull-right {
+    display: block;
+    float: none;
+    margin-bottom: 10px;
+  }
+  .media .pull-left {
+    margin-right: 0;
+  }
+  .media .pull-right {
+    margin-left: 0;
+  }
   .modal {
     top: 10px;
     right: 10px;
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 9fa6f766fc..5b8073bf57 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5272,6 +5272,83 @@ a.thumbnail:hover {
   color: #555555;
 }
 
+.media,
+.media-body {
+  overflow: hidden;
+  *overflow: visible;
+  zoom: 1;
+}
+
+.media {
+  margin-bottom: 10px;
+}
+
+.media .media {
+  margin-top: 20px;
+}
+
+.media .pull-left {
+  margin-right: 10px;
+}
+
+.media .pull-right {
+  margin-left: 10px;
+}
+
+.media .media-object {
+  display: block;
+}
+
+.medias {
+  margin-top: 20px;
+  margin-left: 0;
+  list-style-type: none;
+}
+
+.medias .media {
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+}
+
+.medias > .media.last {
+  margin: 0;
+  border-bottom: none;
+}
+
+.medias > .media .media {
+  padding-bottom: 0;
+  margin-bottom: 0;
+  border-bottom: none;
+}
+
+.media-box {
+  padding: 10px;
+  margin-bottom: 19px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.09);
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+     -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+          box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 480px) {
+  .media .pull-left,
+  .media .pull-right {
+    display: block;
+    float: none;
+    margin-bottom: 10px;
+  }
+  .media .pull-left {
+    margin-right: 0;
+  }
+  .media .pull-right {
+    margin-left: 0;
+  }
+}
+
 .label,
 .badge {
   font-size: 11.844px;
diff --git a/less/bootstrap.less b/less/bootstrap.less
index aaa3d8a6f2..0a1d2f375a 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -52,6 +52,7 @@
 
 // Components: Misc
 @import "thumbnails.less";
+@import "media.less";
 @import "labels-badges.less";
 @import "progress-bars.less";
 @import "accordion.less";
diff --git a/less/media.less b/less/media.less
new file mode 100644
index 0000000000..dbcc212a06
--- /dev/null
+++ b/less/media.less
@@ -0,0 +1,69 @@
+// COMMON STYLES
+// -------------
+
+.media, 
+.media-body {
+  overflow: hidden;
+  *overflow: visible;
+  zoom: 1;
+}
+.media {
+  margin-bottom: 10px;
+}
+.media .media {
+  margin-top: 20px;
+}
+.media .pull-left {
+  margin-right: 10px;
+}
+.media .pull-right {
+  margin-left: 10px;
+}
+.media .media-object {
+  display: block;
+}
+
+// Media list
+.medias {
+  margin-top: 20px;
+  margin-left: 0;
+  list-style-type: none;
+}
+.medias .media {
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(0,0,0,.07);
+}
+.medias > .media.last {
+  margin: 0;
+  border-bottom: none;
+}
+.medias > .media .media {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+} 
+
+// Media box
+.media-box {
+  margin-bottom: 19px;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid rgba(0,0,0,.09);
+  .border-radius(4px);
+  .box-shadow(1px 1px 2px rgba(0,0,0,.1));
+}
+
+@media (max-width: 480px) {
+.media .pull-left,
+.media .pull-right  {
+  float: none;
+  display: block;
+  margin-bottom: 10px;
+}
+.media .pull-left {
+  margin-right: 0; // we stack the components so the indent is not needed anymore 
+}
+.media .pull-right {
+  margin-left: 0; // we stack the components so the indent is not needed anymore 
+}
+}
\ No newline at end of file
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
index 79c7eaa82b..322acae217 100644
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -155,6 +155,20 @@
     }
   }
 
+  // Medias
+  .media .pull-left,
+  .media .pull-right {
+    float: none;
+    display: block;
+    margin-bottom: 10px;
+  }
+  .media .pull-left {
+    margin-right: 0;
+  }
+  .media .pull-right {
+    margin-left: 0;
+  }
+
   // Modals
   .modal {
     top:   10px;