5

I create a VF page using the BootStrap CSS library and everything works just fine if the showHeader is equals FALSE. But If I try to include bootstrap in a vf page with showHeader="True" salesforce styles will get messed up. I am not using pageblock, just html, and some apex:outputText fields

Any ideas? I will appreciate any help.

Here are the attributes of the

   <apex:page controller="dashBoardPOIssues"  showheader="true" standardStylesheets="false"  doctype="html-5.0">
5

You're entering a world of pain there... :)

If you really want to use bootstrap AND retain the salesforce header and the styling that goes with it, consider using 'Visualstrap' which is on the Appexchange at this link.

enter image description here

| improve this answer | |
  • CloudHugger, thank you for the info. You are right it is a pain:) – Carlos May 27 '14 at 22:06
8

If you don't want to download Visualstrap, you can add a namespace to your bootstrap.

A guy at Dreamforce did a tutorial on it:
http://bracketlabs.com/blog/2014/1/20/bracket-labs-dreamforce-roundup-visualforce-and-bootstrap

  1. Basically, you download the bootstrap source.
  2. Find bootstrap.less
  3. Surround whole document with .bs { }
  4. Recompile
  5. Add to SalesForce
| improve this answer | |
  • which editor I use to compile It after adding the namespace – Mahima Gandhe May 5 '16 at 6:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.