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.