diff --git a/css/formee-base.css b/css/formee-base.css
index 1df44f5..54d51f8 100644
--- a/css/formee-base.css
+++ b/css/formee-base.css
@@ -162,4 +162,79 @@ article, aside, details, figcaption, figure, footer, header, hgroup, nav, sectio
 .formee .formee-medium {
 	width: 49%;
 	margin-right: 1%;
+}
+
+
+/********************************************************************
+Bootstrap media queries
+fernando.amdrade@gmail.com
+********************************************************************/
+/*Devices with min-width:480px all grids are converted to grid-12-12*/
+@media screen and (max-width: 480px) {
+	.grid-1-12,	.grid-2-12,	.grid-3-12,	.grid-4-12,	.grid-5-12,	.grid-6-12,	.grid-7-12,	.grid-8-12,	.grid-9-12,	.grid-10-12, .grid-11-12, .grid-12-12 {	width: 97%;}
+	/* input size */
+	.formee .formee-small {
+		width: 100% !important;
+		margin: 0.8% 0 0.8%;
+	}
+	.formee .formee-medium {
+		width: 100% !important;
+		margin: 0.8% 0 0.8%;
+	}
+}
+
+/* Extra small devices xs-grid- */
+@media screen and (max-width: 767px) and (min-width: 481px) {
+	.grid-1-12,	.grid-2-12,	.grid-3-12,	.grid-4-12,	.grid-5-12,	.grid-6-12,	.grid-7-12,	.grid-8-12,	.grid-9-12,	.grid-10-12, .grid-11-12, .grid-12-12 {	width: 97%;}
+	.xs-grid-1-12 {width: 5.333%;}
+	.xs-grid-2-12 {width: 13.666%;}
+	.xs-grid-3-12 {width: 22%;}
+	.xs-grid-4-12 {width: 30.333%; }
+	.xs-grid-5-12 {width: 38.666%; }
+	.xs-grid-6-12 {width: 47%; }
+	.xs-grid-7-12 {width: 55.333%; }
+	.xs-grid-8-12 {width: 63.666%; }
+	.xs-grid-9-12 {width: 72%; }
+	.xs-grid-10-12 {width: 80.333%; }
+	.xs-grid-11-12 {width: 88.666%; }
+	.xs-grid-12-12 {width: 97%; }
+	/* input size */
+	.formee .formee-small {
+		width: 100% !important;
+		margin: 0.8% 0 0.8%;
+	}
+	.formee .formee-medium {
+		width: 100% !important;
+		margin: 0.8% 0 0.8%;
+	}		
+}
+/* Small devices sm-grid */
+@media screen and (min-width: 768px) and (max-width: 992px) {
+	.sm-grid-1-12 {width: 5.333%;}
+	.sm-grid-2-12 {width: 13.666%;}
+	.sm-grid-3-12 {width: 22%;}
+	.sm-grid-4-12 {width: 30.333%;}
+	.sm-grid-5-12 {width: 38.666%;}
+	.sm-grid-6-12 {width: 47%;}
+	.sm-grid-7-12 {width: 55.333%;}
+	.sm-grid-8-12 {width: 63.666%;}
+	.sm-grid-9-12 {width: 72%;}
+	.sm-grid-10-12 {width: 80.333%;}
+	.sm-grid-11-12 {width: 88.666%;}
+	.sm-grid-12-12 {width: 97%;}
+}
+/* Medium devices md-grid- */
+@media screen and (min-width: 993px) {
+	.md-grid-1-12 {width: 5.333%;}
+	.md-grid-2-12 {width: 13.666%;}
+	.md-grid-3-12 {width: 22%;}
+	.md-grid-4-12 {width: 30.333%;}
+	.md-grid-5-12 {width: 38.666%;}
+	.md-grid-6-12 {width: 47%;}
+	.md-grid-7-12 {width: 55.333%;}
+	.md-grid-8-12 {width: 63.666%;}
+	.md-grid-9-12 {width: 72%;}
+	.md-grid-10-12 {width: 80.333%;}
+	.md-grid-11-12 {width: 88.666%;}
+	.md-grid-12-12 {width: 97%;}
 }
\ No newline at end of file
diff --git a/css/formee-structure.css b/css/formee-structure.css
index 0398805..dcd133f 100644
--- a/css/formee-structure.css
+++ b/css/formee-structure.css
@@ -183,4 +183,78 @@ Structure
 	display:inline;
 /*ie7*/
 *width: 45% !important;
+}
+
+/********************************************************************
+Bootstrap media queries
+fernando.amdrade@gmail.com
+********************************************************************/
+/*Devices with min-width:480px all grids are converted to grid-12-12*/
+@media screen and (max-width: 480px) {
+	.grid-1-12,	.grid-2-12,	.grid-3-12,	.grid-4-12,	.grid-5-12,	.grid-6-12,	.grid-7-12,	.grid-8-12,	.grid-9-12,	.grid-10-12, .grid-11-12, .grid-12-12 {	width: 97%;}
+	/* input size */
+	.formee .formee-small {
+		width: 100% !important;
+		margin: 0.8% 0 0.8%;
+	}
+	.formee .formee-medium {
+		width: 100% !important;
+		margin: 0.8% 0 0.8%;
+	}
+}
+
+/* Extra small devices xs-grid- */
+@media screen and (max-width: 767px) and (min-width: 481px) {
+	.grid-1-12,	.grid-2-12,	.grid-3-12,	.grid-4-12,	.grid-5-12,	.grid-6-12,	.grid-7-12,	.grid-8-12,	.grid-9-12,	.grid-10-12, .grid-11-12, .grid-12-12 {	width: 97%;}
+	.xs-grid-1-12 {width: 5.333%;}
+	.xs-grid-2-12 {width: 13.666%;}
+	.xs-grid-3-12 {width: 22%;}
+	.xs-grid-4-12 {width: 30.333%; }
+	.xs-grid-5-12 {width: 38.666%; }
+	.xs-grid-6-12 {width: 47%; }
+	.xs-grid-7-12 {width: 55.333%; }
+	.xs-grid-8-12 {width: 63.666%; }
+	.xs-grid-9-12 {width: 72%; }
+	.xs-grid-10-12 {width: 80.333%; }
+	.xs-grid-11-12 {width: 88.666%; }
+	.xs-grid-12-12 {width: 97%; }
+	/* input size */
+	.formee .formee-small {
+		width: 100% !important;
+		margin: 0.8% 0 0.8%;
+	}
+	.formee .formee-medium {
+		width: 100% !important;
+		margin: 0.8% 0 0.8%;
+	}		
+}
+/* Small devices sm-grid */
+@media screen and (min-width: 768px) and (max-width: 992px) {
+	.sm-grid-1-12 {width: 5.333%;}
+	.sm-grid-2-12 {width: 13.666%;}
+	.sm-grid-3-12 {width: 22%;}
+	.sm-grid-4-12 {width: 30.333%;}
+	.sm-grid-5-12 {width: 38.666%;}
+	.sm-grid-6-12 {width: 47%;}
+	.sm-grid-7-12 {width: 55.333%;}
+	.sm-grid-8-12 {width: 63.666%;}
+	.sm-grid-9-12 {width: 72%;}
+	.sm-grid-10-12 {width: 80.333%;}
+	.sm-grid-11-12 {width: 88.666%;}
+	.sm-grid-12-12 {width: 97%;}
+}
+/* Medium devices md-grid- */
+@media screen and (min-width: 993px) {
+	.md-grid-1-12 {width: 5.333%;}
+	.md-grid-2-12 {width: 13.666%;}
+	.md-grid-3-12 {width: 22%;}
+	.md-grid-4-12 {width: 30.333%;}
+	.md-grid-5-12 {width: 38.666%;}
+	.md-grid-6-12 {width: 47%;}
+	.md-grid-7-12 {width: 55.333%;}
+	.md-grid-8-12 {width: 63.666%;}
+	.md-grid-9-12 {width: 72%;}
+	.md-grid-10-12 {width: 80.333%;}
+	.md-grid-11-12 {width: 88.666%;}
+	.md-grid-12-12 {width: 97%;}
 }
\ No newline at end of file
diff --git a/index.htm b/index.htm
index ff32ff5..86a3401 100644
--- a/index.htm
+++ b/index.htm
@@ -592,7 +592,115 @@ <h3>Can you fix please?</h3>
         <div class="grid-12-12">
                <input class="right" type="submit" title="Send" value="Send" />
         </div>
-    </fieldset>  
+    </fieldset>
+    
+    <div class="formee-msg-info">
+      <h3>Information media queries</h3>
+        <ul>
+          <li>Devices with min-width:480px all grids are converted to grid-12-12</li>
+          <li>Extra small devices class prefix <strong>xs-</strong> min-width: 481px and max-width: 767px</li>
+          <li>Small devices class prefix <strong>sm-</strong> min-width: 768px and max-width: 992px</li>
+          <li>Medium devices class prefix <strong>md-</strong> min-width: 993px</li>
+        </ul>
+    </div>
+
+    <fieldset>
+        <legend>Media queries</legend>
+        <div class="grid-6-12 xs-grid-12-12 md-grid-8-12">
+          <label for="">6-12 xs-12-12 md-8-12</label>
+          <input type="text" value="Fill up the field"/>
+        </div>
+        <div class="grid-6-12 xs-grid-6-12 md-grid-4-12">
+          <label for="">6-12 xs-6-12 md-4-12</label>
+          <input type="text" value="Fill up the field"/>
+        </div>
+        <div class="grid-4-12 xs-grid-6-12 sm-grid-4-12">
+          <label for="">4-12 xs-6-12 sm-4-12</label>
+          <input type="text" value="Fill up the field"/>
+        </div>
+        <div class="grid-4-12 xs-grid-6-12 sm-grid-4-12" >
+          <label for="">4-12 xs-6-12 sm-4-12</label>
+          <input type="text" value="Fill up the field"/>
+        </div>
+        <div class="grid-4-12 xs-grid-6-12 sm-grid-4-12">
+          <label for="">4-12 xs-6-12 sm-4-12</label>
+          <input type="text" value="Fill up the field"/>
+        </div>
+  
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-1-12">
+                <label>1-12</label>
+               <input type="text" value="Fill up the field" />
+        </div>
+
+        <div class="grid-2-12">
+           <label>2-12</label>
+           <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-2-12">
+          <label>2-12</label>
+          <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-2-12">
+          <label>2-12</label>
+          <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-2-12">
+          <label>2-12</label>
+          <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-2-12">
+          <label>2-12</label>
+          <input type="text" value="Fill up the field" />
+        </div>
+        <div class="grid-2-12">
+          <label>2-12</label>
+          <input type="text" value="Fill up the field" />
+        </div>
+      </fieldset>  
 	</form>
 	<!-- formee-->