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 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.

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.

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 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.

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 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.