function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
dradtkedradtke 

Combining Visualforce CSS with Twitter Bootstrap

For an application that I'm building I'm trying to incorporate the Twitter Bootstrap CSS libraries, but there are a couple instances of this causing conflicts with the default Visualforce CSS. The most obvious instance is when trying to use a button other than the default, e.g.

 

<apex:button value="Click Me" styleClass="btn btn-primary"/>

This results in a button that's somewhere between Visualforce's default and the intended final result.

 

I know that the standard stylesheets can be turned off entirely, but I don't want to remove the header in order to do it.

 

One solution I can think of is to try and tell Visualforce that the Bootstrap libraries should have a higher priority, but I'm not sure how to do it, if it's even possible.

 

Any help would be appreciated.

cgerckertcgerckert

Hey


I'm involved in a company that has built out a portal app and is looking into using bootstrap as well. How has been going so far?
dradtkedradtke

We've actually finally gotten ours to the point where we can use entirely custom CSS by disabling the salesforce header and default styling, so there aren't any conflicts any more because we're no longer using Visualforce's default CSS.

 

As far as I know, there is no solution to this other than what we did. Sorry. =/
cgerckertcgerckert

Thanks for getting back to me and letting it know it can be done.

 

All the best,

 

- Christopher
Ak khanAk khan

Using this version of bootstrap. you can work very well without disturbing the sidebar and salesforce header
https://github.com/azhar-js/bootstrap-force
Ak khanAk khan

I modified CSS and Javascript on bootstrap to make it conflict free..
https://github.com/azhar-js/bootstrap-force
You can look into code and make ur own 
Ankit GuptaAnkit Gupta
Hi ,

I am using bootstrap v3.0 for my VF Page and <apex:commandButton> remains unaffected . So I have used <apex:commandLink> instead of the <apex:commandButton> and provided with a border ,font color and a background color that looks exactly the same as bootstrap button.

Here is my code:

.btn{
background-color : #4c4c4c;
border : solid 1px #ffffff;
color : #ffffff;
padding : 2px 2px;
}

<apex:commandLInk value="Submit" styleClass="btn" action={!submit}/>

Thanks!!