2

i am using CDN link to load bootstrap libraries in my vf page. But i am not getting exact same styling.

VF Page

<apex:page showHeader="false" sidebar="false" controller="testClass1" doctype="html-5.0" standardStylesheets="false">
<head>
    <title>HomePage</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'/>

    <style>
        body{
            margin-left:10%;
            margin-right:10%;
            font-family:Montserrat,Arial,Sans;
        }
        .navbar{background-color:#ffd;}
        .navbar li a,.navbar-brand{
            color:#66a6ff !important;
            font-size:20px;
        }
        .navbar-nav li.active a,.navbar li a:hover{
            background-color:#66a6ff !important;
            color:#ffd !important;
        }

        a{text-decoration:none !important;color:#2389aa;}

        .thumbnail{border:0;text-align:center;}

    </style>

</head>
<body data-spy="scroll" data-target=".navbar" data-offset="80">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Something</a>
            </div>
            <div>
                <div class="collapse nav navbar-collapse" id="navBar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Option1</a></li>
                        <li><a href="#">Link2</a></li>
                        <li><a href="#">Optn3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <div id="div2" class="container-fluid">
        <div class="row">
            <div class="col-xs-6 col-sm-3">
                <div class="thumbnail">
                    <a href="#">    
                        <span class="fa fa-user fa-5x"></span><br/>
                        <h4>Account</h4>
                    </a>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3">
                <div class="thumbnail">
                    <a href="#">    
                        <span class="fa fa-users fa-5x"></span><br/>
                        <h4>Group</h4>
                    </a>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3">
                <div class="thumbnail">
                    <a href="#">    
                        <span class="fa fa-home fa-5x"></span><br/>
                        <h4>Home</h4>
                    </a>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3">
                <div class="thumbnail">
                    <a href="#">    
                        <span class="fa fa-file-text-o fa-5x"></span><br/>
                        <h4>Records</h4>
                    </a>
                </div>
            </div>
        </div>
    </div>

</body>

If i go onto use same code in local html file, everything shows up correctly. But can't figure out the problem in VF page.

Improve this question

2 Answers 2

Reset to default
2

This could very well have to do with the non-secure URL you are using for the one lib: 

http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

Some browsers will not allow you to load a file from an insecure CDN in a page (visualforce and Salesforce) that is using HTTPS.

Find a secure CDN that is using HTTPS protocol for that library, and I suspect it will be sorted.

You can also confirm in your browser dev tools, where there should be an error surfaced in the console on page load that corresponds to that library not being loaded.

Improve this answer
7
  • He can also upload those as static resources rather than using the CDNS. They'll be cached and load even faster.
    – crmprogdev
    Jan 8, 2016 at 14:50
  • Not sure they'd load faster than CDN. Salesforce uses Akamai for CDN when you check the public box on static resources I believe, but I don't believe they do for internal uses (not sure how they differentiate when both internal and external apps can use a static resource). I would be interested to see the speed comparisons on a load test. Either way, I'd probably go static resource anyway just for the ability to control the contents.
    – drakored
    Jan 8, 2016 at 14:56
  • That's correct, @drakored. CDN "piggybacking" is used for sites surfaced pages only. The formatting is a bit weird, but on this page it states clearly on the note at the bottom that the cache settings is for Sites only. developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/…
    – pchittum
    Jan 8, 2016 at 16:27
  • Thanks a lot @Peter. It was a silly mistake, that i made.
    – mritzi
    Jan 9, 2016 at 6:14
  • need to understand, which is faster, CDN/static resource? As per my understanding CDN serves faster. But need to undesrtand how salesforce deals with these resources. @rcmprogdev if you can help? this is just layout, i then require to add apex action on various elements on this page and i want to add actions with html tags.
    – mritzi
    Jan 9, 2016 at 6:23
2

In addition to Peter's answer, I'd also add that Salesforce styling tends to disagree with Bootstrap a little. The way around this is to build a copy of Bootstrap that is namespaced. You can do that by downloading the less version of the source code and modifying bootstrap.less.

Wrap the entire bootstrap.less in this less declaration:

.myBootstrapNamespace {
  /* bootstrap.less contents goes here */
}

Now you just need to compile it and you'll have a Bootstrap3 library that only works underneath an element with the class "myBootstrapNamespace" (or you could/should change that). Just zip the dist folder contents and store it as a static resource to use in your projects.

Bracket Lab's Mike Tetlow posted an article on how to do this completely that is geared towards Mac users, but easy to adapt if you know your way around the apps used.

http://bracketlabs.com/blog/2015/3/23/namespacing-bootstrap-from-square-one

Update The link above is dead. I've updated with an answer that provides how to do this step by step.

Sidebar styling getting changed after using bootstrap

Improve this answer
5
  • that's why I have set standardStyling = false. i am not keen to use static resource as of now. @drakored, please elaborate more of its benefit
    – mritzi
    Jan 9, 2016 at 6:27
  • I missed that you were doing showHeader false and style sheets disabled. In that use case this won't help you. This is useful to have for using bootstrap inside of Salesforce's styling.
    – drakored
    Jan 10, 2016 at 1:17
  • @drakored Can u please provide an example on how to use it. The link u have provided is dead now..
    – Kamruzzaman
    Sep 10, 2017 at 18:52
  • 1
    Please check this link: salesforce.stackexchange.com/questions/191561/…
    – Kamruzzaman
    May 28, 2018 at 10:22
  • Thanks @Kamruzzaman, I updated with the link you provided.
    – drakored
    Jul 26, 2019 at 0:34

You must log in to answer this question.

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