Sidebar styling getting changed after using bootstrap

Question

My sidebar styling is messed up if I use bootstrap.

I tried to follow this thread BootStrap css is not working having showHeader="True"

But solution URL is dead.

Please advice.

Answer 1

CSS works in global scope hence anytime you add full fledged css framework like bootstrap or semantic ui to salesforce vf page with headers on (which adds Salesforce's styles css), there will be clashes.

The suggestion on that link was a means to contain the scope of bootstrap to your components alone.

1. Take the bootstrap.scss.

2. Wrap the whole file with your custom class name

   .mybs { [complete bootstrap.scss file content] }

3. Compile the resulting file (you can use one of the online tools)

4. Upload the resulting bootstrap.css to as static resource

5. Now wrap all your components that you want to render with a div like <div class='mybs'></div>

6. This should contain the bootstrap to your components alone, not impacting the standard salesforce.

Answer 2

I found the proper explanation with example here: How to Isolate Bootstrap CSS to Avoid Conflicts

In case the link is dead in future, providing the step by step solution mentioned in the site.

To use Bootstrap CSS, simply wrap your HTML in a div with the class bootstrap-iso, like so:

<div class="bootstrap-iso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

Tutorial

1. Customize Bootstrap CSS

First, you want to customize your Bootstrap CSS using the Bootstrap CSS customization tool. When you are done, download the results. You should end up with two files: bootstrap.css and bootstrap-theme.css (optional)

2. Install LESS on your computer

Install LESS using one of the following links:

Linux Command Line

Windows Command Line

OSX Command Line

GUIS for all platforms!

3. Create a LESS file to prefix your CSS

Create a file called prefix.less that contains the following:

.bootstrap-iso {
  @import (less) 'bootstrap.css';
  @import (less) 'bootstrap-theme.css';  /* optional */
}

4. Compile your LESS file

Compile prefix.less into bootstrap-iso.css. Using the command line, this looks like:

lessc prefix.less bootstrap-iso.css

5. Replace .bootsrap-iso body

Open boostrap-iso.css in a text editor. You will notice that .bootstrap-iso prefixes body elements. It’s not possible for a class to prefix the body. We really want these styles to apply to just the class. We can fix this with a simple find and replace:

a. Find all instance of: .bootstrap-iso body and .bootstrap-iso html

b. Replace with: .bootstrap-iso

6. You're done!

Simply add bootstrap-iso.css to your page and wrap any content you want styled by Boostrap with the class bootstrap-iso.

Answer 3

Can also if not needed for your page turn off sidebar.

<apex:page sidebar="false" showHeader="false" >

Other options, but will affect the entire page, usually best on full page web pages of using bootstrap is to turn off standard style sheets so there is no conflict with bootstrap

<apex:page standardStylesheets="false" showHeader="false" sidebar="false" >

But I'd only recommend that if you want to hide the sales force tabs and header and make your own page the full view. Not great for internal used data entry pages, but good for external facing site pages.