4

Is it possible to use twitter bootstrap 3 alongside with standard salesforce stylesheet. if it is possible i'd like to know how it can be done.

  • I would be surprised if someone would say yes to start. When u load ths js and css of bootstrap the first step I have been adviced is to set standardstylesheets to false. Will wait for answers :) – Rao Mar 18 '14 at 5:36
5

Actually, you can have both, standard SFDC stylesheets and bootstrap stylesheets on one single page without having any conflict. How? You can "scope" the css by recompiling the bootstrap LESS files after changing the bootstrap less file by wrapping it within a "domain", i.e.

.scopedBootstrap{
    @import "variables.less";
    @import "mixins.less";
….
}

then in your VF page, you only need to wrap your bootstrap content in

<div class="scopedBootstrap">
      SOME BOOSTSTRAP CONTENT
</div>
0

You can include the Bootstrap 3 stylesheet (and JavaScript) in a Visualforce page either from a static resource you create or from the CDN location (http://www.bootstrapcdn.com/).

You have no control over the Salesforce standard stylesheet class names being present when you use apex: tags but can use the styleClass attributes to add the Bootstrap ones. But as the two sets of styles have not been designed to go together you would have to experiment to see what the results are and changes to either as they evolve may impact those results.

If you use HTML tags then you have full control of the class names but lose the features of the apex: tags; for some parts of your pages that may make sense.

0

Or may be another solution would be to use 2 Visualforce pages.

One page with actual content with useStandardStylesheets="false" and showHeader="false" and sidebar="false" as well and added bootstrap css and all html content. then use this Visualforce page inside the other Visualforce page using an iFrame ...

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.