diff --git a/getting-started.html b/getting-started.html index 1c864676b3..b8a405ce43 100644 --- a/getting-started.html +++ b/getting-started.html @@ -719,23 +719,17 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.

-

Google Maps

-

If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of * { box-sizing: border-box; }. Previously, you may have also ran into issues with the use of max-width on images. The following snippet should avoid all those problems.

+

Box-sizing

+

Certain third party tools—such as Google Maps—have trouble working out of the box with Bootstrap due to our use of * { box-sizing: border-box; }. Use the following snippet to override it when necessary.

{% highlight css %} -/* Fix Google Maps canvas +/* Box-sizing reset * - * 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.) + * Wrap your third party code in a `.reset-box-sizing` to override Bootstrap's + * global `box-sizing` changes. */ -.google-map-canvas, -.google-map-canvas * { .box-sizing(content-box); } - -/* Optional responsive image override */ -img { max-width: none; } +.reset-box-sizing, +.reset-box-sizing * { .box-sizing(content-box); } {% endhighlight %}