function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Lavanya Gottumukkala 8Lavanya 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">
  <title>Bootstrap Example</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href=""/>
  <script src=""></script>
  <script src=""></script>

<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 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.


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
Hi Lavanya,

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.

Correct one mistake and it would work fine:
<link rel="stylesheet" href=""/>
<script src=""></script>

with following:
<link rel="stylesheet" href=""/>
<script src=""></script>
Salesforce fetches files from secured servers only.

Mark this as Best Answer, if this solves your problem