1

Is it possible to use Bootstrap in a VFP without having to use standardStylesheets="false" and showHeader="false"?

When I solely add in the stylesheets tag, my whole page is altered a little bit. The font is much larger but that is the only change. Even if I put in a styleClass="btn btn-primary on a button, I get no response from Bootstrap. That is until I add in the two tags, standardStylesheet=false and showHeader=false. I also am unable to override the standard style with inline style editing or style tags in the header.

So is it possible to use Bootstrap in conjunction with the standard Salesforce styles? Without having to overwrite the page with an iFrame?

Code examples:

<apex:page id="ACHBounce" standardController="Case" extensions="ACHBounceController">
   <apex:includeScript value="/support/console/37.0/integration.js"/>
   <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
   <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/>
   <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<apex:commandButton value="Start1" style="background-color:red;" styleClass="btn btn-primary" action="{!test}"/>
<apex:commandLink action="{!test}" value="Start2" id="ACHButton" styleClass="btn btn-primary" />
<input type="button" class="btn btn-primary" value="Start3" onclick="test(); return false;"/>
<button class="btn btn-primary" onClick="test()" type="button">Start4</button>
7

The reason the CSS goes all over the place is that Salesforce uses the same class names and properties as Bootstrap. If there's a conflict, Salesforce wins. There's two reasons I can think of that this would happen, either Salesforce is using !important after each property, or Salesforce renders their stylesheets after everything else and because CSS literally cascades, the last properties rendered are used, any before it are ignored. The latter is most likely.

One way to do this would be to use namespacing within the CSS itself. This means you wouldn't be able to call Bootstrap from a CDN, rather you'd need to reference it as a static resource.

The best way is to namespace your bootstrap classes and styles, which basically means adding .bootstrap before each declaration block. You could do this manually which can be time consuming, or you could use a tool like CSS Prefix.

Assuming you've namespaced each declation with .bootstrap, you could then just code something as follows:

<apex:pageBlock styleClass="bootstrap">
  <!-- Other Markup with Bootstrap classes -->
</pageBlock>

This means Bootstrap's styles only get applied to elements inside the <apex:pageBlock/> with a class of "Bootstrap" and won't affect other Salesforce stuff, such as the header or sidebar.

  • awesome suggestion. I got it up in running in less then 10 minutes! Thank you! – Olivia Apr 20 '17 at 16:32
  • 1
    @Olivia Good to know. It may be worth looking at VisualStrap as Adrian suggested, although sadly it hasn't been updated in almost a year. – Dan Jones Apr 20 '17 at 16:40

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.