add third party support section to the docs

diff --git a/_includes/nav-getting-started.html b/_includes/nav-getting-started.html
index 022d335cd6587db0ddeeedd545261d62eae78b3b..9788facdda6dc675f6b9dbc765f223393bfc6ae4 100644 (file)
--- a/_includes/nav-getting-started.html
+++ b/_includes/nav-getting-started.html
@@ -14,9 +14,12 @@
 <li>
   <a href="#browsers">Browser support</a>
 </li>
+<li>
+  <a href="#third-parties">Third party support</a>
+</li>
 <li>
   <a href="#license-faqs">License FAQs</a>
 </li>
 <li>
   <a href="#customizing">Customizing Bootstrap</a>
-</li>
\ No newline at end of file
+</li>

diff --git a/getting-started.html b/getting-started.html
index ef0bdbf53e1a9e7c8f37797c1c718cb82887bba3..26787ab3485f3295dbc5f48a32c1094d13c245f2 100644 (file)
--- a/getting-started.html
+++ b/getting-started.html
@@ -120,11 +120,11 @@ bootstrap/
 
 
 
-  <!-- Browser compatibility
+  <!-- Browser support
   ================================================== -->
   <div class="bs-docs-section">
     <div class="page-header">
-      <h1 id="browsers">Browser compatibility</h1>
+      <h1 id="browsers">Browser support</h1>
     </div>
     <p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.</p>
 
@@ -153,6 +153,37 @@ bootstrap/
 
 
 
+  <!-- Third party support
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="page-header">
+      <h1 id="third-parties">Third party support</h1>
+    </div>
+    <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid some potential issues in your projects.</p>
+
+    <h3>Google Maps</h3>
+    <p>If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of <code>* { box-sizing: border-box; }</code>. Previously, you may have also ran into issues with the use of <code>max-width</code> on images. The following snippet should avoid all those problems.</p>
+{% highlight css %}
+/* Fix Google Maps canvas
+ *
+ * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
+ * global `box-sizing` changes. You may optionally need to reset the `max-width`
+ * on images in case you've applied that anywhere else. (That shouldn't be as
+ * necessary with Bootstrap 3 though as that behavior is relegated to the
+ * `.img-responsive` class.)
+ */
+
+.google-map-canvas,
+.google-map-canvas * { .box-sizing(content-box); }
+
+/* Optional responsive image override */
+img { max-width: none; }
+{% endhighlight %}
+  </div>
+
+
+
+
   <!-- License FAQs
   ================================================== -->
   <div class="bs-docs-section">