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
Geoff SpozettaGeoff Spozetta 

Visualforce and Twitter Bootstrap - Failing to render buttons

Hi All,

I'm attempting to use twitter Bootstrap and Visualforce together, and as far as I can tell, I am including the files correctly. However I am unable to render buttons to the style class provided, and instead get the following: 

Which, as we can tell just looks horrible


Here is my header code which I reference using "<apex: include>:

 

<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content=""/>
    <meta name="author" content=""/>


    <title>portal</title>

    <!-- Bootstrap core CSS -->
    <apex:stylesheet value="{!URLFOR($Resource.bootstrap, '/css/bootstrap.min.css')}" />
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, '/js/bootstrap.min.js')}"/>

    

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
Sumit Kumar Singh 9Sumit Kumar Singh 9
Hello Geoff, 
You will have to turn off the standard style sheet of slaesforce.  
<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
Let, me know if it helps you.

Thnaks,
Sumit Kumar Singh
Geoff SpozettaGeoff Spozetta
@Sumit Thanks for your help on this, I've since determined that Bootstrap is incompatible with the standard stylesheets, in order for it to be effectively used, all standard SF sheets must be switched off, as you've suggested.