third-party-support.md 1.07 KB
Newer Older
Mark Otto's avatar
Mark Otto committed
1
2
3
---
layout: page
title: Third party support
4
group: getting-started
Mark Otto's avatar
Mark Otto committed
5
6
7
8
---

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.

Mark Otto's avatar
Mark Otto committed
9
## Box-sizing
Mark Otto's avatar
Mark Otto committed
10

Mark Otto's avatar
Mark Otto committed
11
Some third-party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
Mark Otto's avatar
Mark Otto committed
12

Chris Rebert's avatar
Chris Rebert committed
13
You can deal with this conflict by overriding the box model back to `content-box` just for the third-party widget's section of the page:
Mark Otto's avatar
Mark Otto committed
14
15

{% highlight scss %}
Chris Rebert's avatar
Chris Rebert committed
16
/* Box-sizing reset
Mark Otto's avatar
Mark Otto committed
17
 *
Chris Rebert's avatar
Chris Rebert committed
18
19
 * Override an entire region's box model via CSS
 * to avoid conflicts due to the global box model settings of Bootstrap.
Mark Otto's avatar
Mark Otto committed
20
 */
Chris Rebert's avatar
Chris Rebert committed
21
.selector-for-some-widget {
Mark Otto's avatar
Mark Otto committed
22
23
24
25
26
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
{% endhighlight %}