2

Adding this to vf page:

enter image description here

without bootstrap

enter image description here

The issues with bootstrap are: font size is changed for all text, header is gone.

Improve this question

2 Answers 2

Reset to default
4

I also ran into this and thought that namespacing bs3 was a pain or just not possible as in bs2.

I used the solution in this presentation and it's working fine here.

Visualforce and Bootstrap

Improve this answer
2
  • I have successfully done this as well. It works for most elements but there are some that you still have to work with as the CSS selectors in salesforce are more specific that in a namespaced BS. Also, the nav-tabbed and other tab css seems to not work. But for the most part this can be overcome and it does not mess with the native SF UI.
    – Eric
    Commented Oct 12, 2014 at 22:05
  • @David The link provided in the solution is dead now..!
    – Kamruzzaman
    Commented Sep 9, 2017 at 23:04
1

Early in Bootstrap CSS there is:

body {
    margin: 0;
}

and in the Salesforce platform's common.css there is:

body,td {
    color:#333;
    margin:0;
}
body {
    background-repeat:repeat-x;
    background-position:left top;
    font-size:75%;
    font-family:Arial,Helvetica,sans-serif;
    background-color:#fff;
}

So in both, elements with no classes are styled and styled differently. Other class-based styles in each rely on these starting points. Essentially both Bootstrap and the Salesforce platform's styling are complete in themselves and are not designed to work alongside any other complete set of styles. There is also a likelihood of CSS class name collisions where the same name means different things in the two sets of CSS.

Visualforce's apex:page includes flags such as standardStylesheets that allow the standard CSS to be turned off but this is probably most useful when you want to create an entirely custom web site (via Sites). If you want to keep the standard header and sidebar and general look of Salesforce, you need to keep the Salesforce styling.

If you want to use a specific part of Bootstrap's styling, it may be possible to build some customized CSS using Bootstrap's Customize and Download that will inter-operate with the Salesforce CSS but I have not tried that.

You can certainly add your own styling to pages (by qualifying the styling using distinct CSS class names), designed to fit in with the existing Salesforce platform's styling both in terms of the look of what you are adding and in terms of not breaking other parts of the page.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .