[SalesForce] How to get bootstrap styling in visualforce page

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.

Best Answer

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.

Related Topic