[Fix issue #15712] Add example of how to use grid system within a modal

Created by: kkirsche

[Fix issue #15712 (closed)] Add example of how to use grid system within a modal

docs/_includes/js/modal.html

@@ -216,6 +216,29 @@
 <div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
   ...
 </div>
+{% endhighlight %}
+
+  <h2 id="modals-grid-system">Using the grid system</h2>
+  <p>For modals which would like to take advantage of the Bootstrap grid system, nest <code>.container-fluid</code> within the <code>.modal-body</code> to have access to all the grid system classes</p>
+{% highlight html %}
+<div class="modal fade">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        ...
+      </div>
+      <div class="modal-body">
+        <div class="container-fluid">
+          ...
+        </div>
+      </div>
+      <div class="modal-footer">
+        ...
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
 {% endhighlight %}
 
   <h2 id="modals-related-target">Varying modal content based on trigger button</h2>

less/dropdowns.less

@@ -168,6 +168,17 @@
   z-index: (@zindex-dropdown - 10);
 }
 
+// Backdrop to catch body clicks on mobile, etc.
+// ---------------------------
+.dropdown-backdrop {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: @zindexDropdown - 10;
+}
+
 // Right aligned dropdowns
 .pull-right > .dropdown-menu {
   right: 0;