Apex Code Development You need to sign in to do that
Don't have an account?
Lavanya Gottumukkala 8 How to dispaly two columns in a vf page using bootstrap?
Hi All,
I am new to boot strap.Please see the below code.
<apex:page showHeader="false" docType="html-5.0" sidebar="false" applyBodyTag="false" applyHtmlTag="false" standardStylesheets="false" cache="false">
<html lang="en">
<head>
<title>Bootstrap Example</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.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Small Grid</h1>
<p>The following example will result in a 25%/75% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-sm-9" style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</div>
</body>
</html>
</apex:page>
As per the above code,2 columns should be displayed.But instead of columns rows are getting dispalyed.Where I need to make changes in the code to display columns exactly as per the code?
Thanks in advance
I am new to boot strap.Please see the below code.
<apex:page showHeader="false" docType="html-5.0" sidebar="false" applyBodyTag="false" applyHtmlTag="false" standardStylesheets="false" cache="false">
<html lang="en">
<head>
<title>Bootstrap Example</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.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Small Grid</h1>
<p>The following example will result in a 25%/75% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-sm-9" style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</div>
</body>
</html>
</apex:page>
As per the above code,2 columns should be displayed.But instead of columns rows are getting dispalyed.Where I need to make changes in the code to display columns exactly as per the code?
Thanks in advance
Just store your css and script files in static resources and refer them in your page, then this will be working fine. Remove html and body tags from the page.
Thanks,
Pankaj
replace
with following: (https)
Salesforce fetches files from secured servers only.
Mark this as Best Answer, if this solves your problem