Wednesday, February 6, 2013

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.


  1. Hi, I 'm struggling in integrating a starter page of Twitter Bootstrap as a theme in Oracle Apex. Could you give me some hints how to do this ? Thank you !

  2. Hello,

    where exactly are you struggling when implementing Twitter Bootstrap? Is it the integration in the templates of an apex theme? If so, you could focus on two steps at first:
    1) Integrate the Bootstrap library in a page template of your apex theme: the process is similar like integrating any other 3rd-party-library in Apex, get insprired by googling something like "oracle apex theme page template library". [You can ignore the mentioned css conflicts with Bootstrap at first.]
    2) The navigation bar is a good starting point to implement your first Bootstrap Component in an Apex theme. Look at the structure and class names in the "Navs"-section of the Bootstrap documentation. Open a copy of a list template like "Vertical sidebar list" in your apex theme and project the structure of the Bootstrap-Nav-Item to this list item template (in the beginning it's primary the exchanging of the Apex class names with the Bootstrap class names).


  3. Hello Robert . is there by any chance a set of bootstrap css and js already done with prefix namespace ?

  4. Hi
    Iam having some issues after adding bootstrap libraries to apex. The apex controls are messed up, can you help please

  5. Hi Robert
    Ant updated advise on bootstrap integration with apex 5? Its like these 2 still can coexist the conflict is still layout is messed up like apex 4.x...regards