0

I have a requirement to create a fairly basic page that will need to be printed as a PDF. My first thought was to use Bootstrap for the grid system. But I don't seem to be able to get my and the Bootstrap CDN to work together. When I open Chrome dev tools my styles are there but they are being overridden. Would I be better off just using CSS Grid?

Abbreviated page below

<apex:page id="Region_Health_Check" showHeader="false" standardController="Region__c" docType="html-5.0"
    sideBar="false" standardStylesheets="false">
    <head>
        <title>Region Health Check Report</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <apex:stylesheet value="{!$Resource.HealthCheckStyle}"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    </head>
    <body>
    <div class="container">
    <div class="row">

        <div class="col-sm-2">
            <span>  Logo</span>
        </div>
        <div class="col-sm-7">
        </div>
        <div class="col-sm-3">
            <span>Overall Health Score</span>
        </div>
    </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>


</apex:page>
1
  • any particular reason why you are not using SLDS?
    – glls
    Commented Nov 28, 2018 at 1:00

1 Answer 1

0

I have used bootstrap in Visual Force pages, however, I uploaded the resource to a Static Resource as a Zip file. For example, in the VF Page:

<apex:includescript value="{!URLFOR($Resource.bootstrap334dist,'/bootstrap-3.3.4-dist/js/bootstrap.min.js')}"/> 
<script src="{!URLFOR($Resource.bootstrap334dist,'/bootstrap-3.3.4-dist/js/bootstrap.min.js')}" />

Then the static resource is a zip file named: bootstrap334dist.zip Within the zip file, there is a folder \bootstrap-3.3.4-dist\ which contains the bootstrap code.

You also have to be careful about where you put this code. HTML will be executed from top to bottom. It is possible some of your other scripts are conflicting with bootstrap. You may want to try putting your bootstrap code either at the very top or the very bottom of your page.

You must log in to answer this question.

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