Creating Bootstrap-friendly Templates

  1. Avatar of Richard

    I'm attempting to create a new set of templates which employ Twitter's Bootstrap framework; however, when the page is viewed in edit mode, there appears to be some CSS conflict.

    Here's how the page looks when Bootstrap isn't used:

    And here's how it looks when it is used:

    Any thoughts about how this conflict can be resolved?

  2. Avatar of Paulius

    This is a known problem. It is possible to "fix" the CSS conflicts for same concrete 3th party product, but after a new version of that product is released other CSS conflicts occurs again. We have plans to hide Better CMS DOM in the separate iframe and avoid CSS conflicts completely, but no concrete date for that.

  3. Avatar of Robert

    So does this mean you can't use bootstrap currently?

  4. Avatar of Paulius

    Robert, you can use bootstrap. Just now same layout elements (CMS icons for example) will collapse in the edit mode.

  5. Avatar of IP

    Is there any tutorial or reference on how to integrate bootstrap properly? Or if Richard can share whatever he's done successfully so far? Regards

  6. Avatar of Gerben

    Month past to date, has anything changed?

  7. Avatar of Richard

    Sorry IP, only just saw your question. I've put my adoption of BetterCMS on the backburner for now as this issue was causing training issues for our users. Regards, Richard.

  8. Avatar of IP

    Thanks Richard. Wish BetterCMS team have some reasonable response to this.

  9. Avatar of Simonas


    we have bootstrap support feature in the development road-map and it will be added in the upcoming major version, but I can not provide an exact date for it.


  10. Avatar of IP

    Thank you Simonas. Really appreciate your response. Looking forward to bootstrap support.

  11. Avatar of Gerben

    Hello Simon,

    Seems nice, thanks for the update! :D


  12. Avatar of Incg

    I think the primary issue here is that bettercms's CSS isn't built with box-sizing: border-box in mind, and bootstrap sets * { box-sizing: border-box }.

    You can comment out the 6 or so lines in bootstrap's CSS that define those rules, but I can't speak to that fixing everything as I'm not that far along.

  13. Avatar of Joseph

    I'm using bootstrap 3 and here is the CSS fix that worked for me:

    .bcms-layer, .bcms-layer * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing:content-box; }

    .bcms-layer select, .bcms-modal-body > div, .bcms-layer input { -webkit-box-sizing:border-box; -moz-box-sizing: border-box; box-sizing:border-box; }

  14. Avatar of Nick

    @Joeseph - your fix for BS3 worked for me too - thank you very much.

  15. Avatar of Richard

    I'm just now revisiting BetterCMS - thanks @Joseph for sharing your solution! Much appreciated.

  16. Avatar of Joseph

    Glad I could help.

    Here is my latest version of the CSS for Bootstrap:

    /*BETTER CMS overwrite */ .bcms-layer, .bcms-layer * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing:content-box; }

    .bcms-layer select, .bcms-modal-body > div, .bcms-layer input, .bcms-tables, .bcms-access-table > div > div, .bcms-blog-templates-holder > div { -webkit-box-sizing:border-box; -moz-box-sizing: border-box; box-sizing:border-box; }

  17. Avatar of Ryan

    logout button was pushing out over show/hide button for me. Slight adjustment to remedy this

    /*BETTER CMS overwrite */ .bcms-layer, .bcms-layer * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing:content-box; } .bcms-layer .bcms-sidemenu-header { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box !important; } .bcms-layer select, .bcms-modal-body > div, .bcms-layer input { -webkit-box-sizing:border-box; -moz-box-sizing: border-box; box-sizing:border-box; }

  18. Avatar of James

    new to BCMS. Same issue occurs using zurb foundation, css conflict. Any update on a sandboxed solution for BCMS as described above? Cheers

  19. Avatar of Mark

    Hi All,

    We have applied an html template based on bootrap where the css is conflicting with the CSM tools, ie the left panel is partially covered and the edit buttons on a region are covered. Is there way to get around this.

    I tried adding the above css to the page, but that didn't work, are there any fixes for this?


  20. Avatar of Mark Redman

    I can confirm that the fixes above work to sort out conflicts with bootsrap on the latest version (1.10.1)

    Other issues were related to other css.

  21. Avatar of Adam

    Afternoon all,

    Has anybody managed to compile a simple working bootstrap theme I could use, I'm usually work with wordpress and tried to develop the theme from scratch however I was having trouble with Naviagtions and would love a basic base bootstrap template if anyone has one.

    I've just found out about this CMS and hope to move all my upcoming projects over to it. It's awesome from a developers point of view.

    Many Thanks

  22. Avatar of Mark Redman

    Implementation of a bootstrap or html5 template is just a matter of taking a template and splitting up into its template parts, where you can use the built in master pages via the interface.

    You can find free bootstrap templates online: eg:

    The CMS is not like Joomla or others that has built in tools to set up menus, naviagation etc. You will need implement that yourself.


  23. Avatar of Adam

    Thanks for the quick response Mark.

    Keep up the good work.

* Mandatory
* Mandatory
* Mandatory

Verify that you are human