Merge branch 'master' into v4

Conflicts:
	.travis.yml
	Gruntfile.js
	bower.json
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	dist/js/bootstrap.js
	dist/js/bootstrap.min.js
	docs/_data/glyphicons.yml
	docs/_includes/components/breadcrumbs.html
	docs/_includes/components/button-dropdowns.html
	docs/_includes/components/button-groups.html
	docs/_includes/components/dropdowns.html
	docs/_includes/components/glyphicons.html
	docs/_includes/components/labels.html
	docs/_includes/components/list-group.html
	docs/_includes/components/media.html
	docs/_includes/components/navs.html
	docs/_includes/components/panels.html
	docs/_includes/components/progress-bars.html
	docs/_includes/components/thumbnails.html
	docs/_includes/components/wells.html
	docs/_includes/css/buttons.html
	docs/_includes/css/forms.html
	docs/_includes/css/helpers.html
	docs/_includes/css/images.html
	docs/_includes/css/less.html
	docs/_includes/customizer-variables.html
	docs/_includes/getting-started/accessibility.html
	docs/_includes/getting-started/browser-device-support.html
	docs/_includes/getting-started/community.html
	docs/_includes/getting-started/examples.html
	docs/_includes/getting-started/grunt.html
	docs/_includes/getting-started/license.html
	docs/_includes/getting-started/template.html
	docs/_includes/header.html
	docs/_includes/js/affix.html
	docs/_includes/js/alerts.html
	docs/_includes/js/carousel.html
	docs/_includes/js/collapse.html
	docs/_includes/js/dropdowns.html
	docs/_includes/js/modal.html
	docs/_includes/js/overview.html
	docs/_includes/js/popovers.html
	docs/_includes/js/scrollspy.html
	docs/_includes/js/tabs.html
	docs/_includes/js/tooltips.html
	docs/_includes/js/transitions.html
	docs/_includes/nav/javascript.html
	docs/_layouts/default.html
	docs/assets/css/docs.min.css
	docs/assets/css/src/docs.css
	docs/assets/js/customize.min.js
	docs/assets/js/docs.min.js
	docs/assets/js/raw-files.min.js
	docs/assets/js/vendor/FileSaver.js
	docs/assets/js/vendor/autoprefixer.js
	docs/assets/js/vendor/uglify.min.js
	docs/dist/css/bootstrap.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	docs/dist/js/bootstrap.min.js
	docs/examples/blog/index.html
	docs/examples/carousel/index.html
	docs/examples/cover/index.html
	docs/examples/dashboard/index.html
	docs/examples/narrow-jumbotron/narrow-jumbotron.css
	docs/examples/navbar-fixed-top/index.html
	docs/examples/navbar-static-top/index.html
	docs/examples/non-responsive/index.html
	docs/examples/non-responsive/non-responsive.css
	docs/examples/theme/index.html
	grunt/configBridge.json
	js/affix.js
	js/carousel.js
	js/collapse.js
	js/dropdown.js
	js/modal.js
	js/popover.js
	js/scrollspy.js
	js/tab.js
	js/tests/unit/affix.js
	js/tests/unit/button.js
	js/tests/unit/carousel.js
	js/tests/unit/modal.js
	js/tests/unit/tooltip.js
	js/tooltip.js
	less/badges.less
	less/glyphicons.less
	less/type.less
	less/variables.less
	package.json
	scss/_dropdown.scss
	scss/_forms.scss
	test-infra/npm-shrinkwrap.json

1 files changed, 63 insertions, 40 deletions

diff --git a/docs/javascript/modal.md b/docs/javascript/modal.md
index 22c74f31c..4ae9f95ba 100644
--- a/docs/javascript/modal.md
+++ b/docs/javascript/modal.md
@@ -248,15 +248,69 @@ For modals that simply appear rather than fade in to view, remove the `.fade` cl
 </div>
 {% endhighlight %}
 
+## Using the grid system
+
+To take advantage of the Bootstrap grid system within a modal, just nest `.container-fluid within the `.modal-body` and then use the normal grid system classes within this container.
+
+{% example html %}
+<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
+      </div>
+      <div class="modal-body">
+        <div class="container-fluid">
+          <div class="row">
+            <div class="col-md-4">.col-md-4</div>
+            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+          </div>
+          <div class="row">
+            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
+          </div>
+          <div class="row">
+            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+          </div>
+          <div class="row">
+            <div class="col-sm-9">
+              Level 1: .col-sm-9
+              <div class="row">
+                <div class="col-xs-8 col-sm-6">
+                  Level 2: .col-xs-8 .col-sm-6
+                </div>
+                <div class="col-xs-4 col-sm-6">
+                  Level 2: .col-xs-4 .col-sm-6
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="bs-example bs-example-padded-bottom">
+  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
+    Launch demo modal
+  </button>
+</div>
+{% endexample %}
+
 ## Varying modal content based on trigger button
 
 Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
 
-<div class="bs-example" style="padding-bottom: 24px;">
+{% example html %}
+<div class="bs-example">
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
-  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
-
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
   <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
@@ -287,42 +341,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
     </div>
   </div>
 </div>
-
-{% highlight html %}
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
-
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-          <span class="sr-only">Close</span>
-        </button>
-        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
-      </div>
-      <div class="modal-body">
-        <form>
-          <div class="form-group">
-            <label for="recipient-name" class="control-label">Recipient:</label>
-            <input type="text" class="form-control" id="recipient-name">
-          </div>
-          <div class="form-group">
-            <label for="message-text" class="control-label">Message:</label>
-            <textarea class="form-control" id="message-text"></textarea>
-          </div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Send message</button>
-      </div>
-    </div>
-  </div>
-</div>
-{% endhighlight %}
+{% endexample %}
 
 {% highlight js %}
 $('#exampleModal').on('show.bs.modal', function (event) {
@@ -336,6 +355,10 @@ $('#exampleModal').on('show.bs.modal', function (event) {
 })
 {% endhighlight %}
 
+## Modals with dynamic heights
+
+If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` to readjust the modal's position in case a scrollbar appears.
+
 ## Usage
 
 The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
@@ -423,7 +446,7 @@ Manually hides a modal. **Returns to the caller before the modal has actually be
 
 ### Events
 
-Bootstrap's modal class exposes a few events for hooking into modal functionality.
+Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
 
 <div class="table-responsive">
   <table class="table table-bordered table-striped">