CSS conflicts between Twitter Bootstrap and Apex

Twitter Bootstrap has become a hugely popular framework these days. It's lightweighted, elegant, responsive and released under open-source license - hooray! Furthermore the implementation into the apex templates is mostly straightforward.

But after implementing the first bootstrap components into Oracle Apex, you will notice that something has slightly changed... when examining the html elements it's getting obvious, that quite a lot of standard apex elements are now mixed up with stylings from bootstrap. You can see it most clearly when using input items: just resize your item, change the "Form Element Width"-setting in Apex - the value will be ignored! The width of your input item will be overwritten by the value from a generic Bootstrap-style.

Unfortunately Bootstrap contains css selectors which are simply too generic, and this causes the css conflicts with Oracle Apex.

One solution could be using the customizing feature from bootstrap. There you can create your own "personal bootstrap edition", including just those components you actually need. For example, if you start using bootstrap by implementing a navigation list, you could create your customized bootstrap including just the scaffoldings and the nav components. However, taking a closer look again and you will see that Bootstrap i.e. declares its "font-family" on the level of the common html-body.

There is no way around it: an clean integration of Bootstrap is only possible, if you modify the LESS sourcecodes depending on your needs to generate a new bootstrap.css. The approach would be to namespace the Bootstrap components and reference to this additional class name in your apex application. So the bootstrap components would be always surrounded by its own container within apex. It depends on the used bootstrap component, but commonly some modifications in the LESS-sources are necessary to avoid every css conflict between bootstrap and apex styles.

My conclusion

When implementing Twitter Bootstrap in Oracle Apex, it's unavoidable to get know about the stylesheets and dependencies of the bootstrap components. Exploiting the library and the LESS sourcecodes is essential.

Bootstrap is a fine, perhaps a little bit overhyped:) framework. I will continue using bootstrap - not as a complete framework, but to cherry-pick some parts of it.