4

I wanted to create a image slider, and i got a few pointes that lead to "Twitter Bootstrap". Now i have decide to dig in, i tried the basic example on Twitter Bootstrap in Visualforce ( Which does show the below VF page in 3 fixed columns with some content inside) , it doesn't seem to work as its mentioned.

I have uploaded the Static Resource of Bootstrap. I'm using IE 8 ( i'm being forced to use this for time being. Can't even debug it)

Please let me know if i am missing anything.

VF Page

<apex:page standardStylesheets="false" showheader="false" sidebar="false">
<html>
<head>
<title>Fixed layout example with Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>   
 <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, '/css/bootstrap.css')}"/>   
 <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, '/css/bootstrap.min.css')}"/>   
 <apex:includeScript value="{!URLFOR($Resource.Bootstrap, '/js/bootstrap.js')}"/>   
 <apex:includeScript value="{!URLFOR($Resource.Bootstrap, '/js/bootstrap.min.js')}"/> 
 </head>
 <body>
 <div class="row">
 <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, 
massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, 
posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse 
vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. 
Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend 
arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, 
tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id 
felis. Vivamus sollicitudin metus eget eros.</p></div>

<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam 
cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, 
massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, 
posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse 
vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. 
Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend 
arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, 
tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id 
felis. Vivamus sollicitudin metus eget eros.</p></div>

<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam 
cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, 
massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, 
posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse 
vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. 
Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend 
arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, 
tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id 
felis. Vivamus sollicitudin metus eget eros.</p></div>
</div>  
</body>
</html>
</apex:page>
|improve this question
  • 1
    What exactly is the problem ? – Boris Bachovski Aug 8 '13 at 5:27
  • Content inside div should appear as a columns but it is getting displayed in rows...CSS issue i guess. – ForceDeveloper Aug 8 '13 at 5:33
  • 1
    1) Check if your folder structure of your static resource is inline. 2) Try another browser (Chrome or Firefox) and using the developer's console check if there are any errors 3) You don't have to load both, the full and the minified resource of the JS and the CSS. Use either /css/bootstrap.min.css' or /css/bootstrap.css', same for the JS. – Boris Bachovski Aug 8 '13 at 5:39
  • Yes Correct, its not necessary to add both..i'll add only one CSS, typo mistake....1) Folder structure is valid...2) I'll try it when i get a chance 3) Valid one typo mistake i'll update the post....Thanks for sharing – ForceDeveloper Aug 8 '13 at 5:42
  • We're on 2.3.2 for now. I'd get off the per-release v3 for anything "production" – Shane McLaughlin Aug 14 '13 at 4:39
1

On the apex page tag, use false for HTML and body tags so that you don't get duplicates.

Also be sure to make it html5 doctype.

Can't tell which bootstrap version you're running, but you may want that row in a .container div.

I run bootstrap on visualforce for customer-facing stuff and it's awesome.

|improve this answer
  • Bootstrap css is getting applied on the fonts since fonts are getting changed but not the layout...I'm trying to populate a grid layout ( 1 row with 3 columns of equal width ) but somehow its appearing as 3 rows...Did i miss anything while using Bootstrap. – ForceDeveloper Aug 9 '13 at 4:11
  • Shane, i did wrap it inside the div with class container but still no change in output...I'm using HTML 5 ( docType="html-5.0" )..Jquery UI 1.9..Bootstrap v3. – ForceDeveloper Aug 9 '13 at 4:15
1

http://www.oyecode.com/2013/05/how-to-use-twitter-bootstrap-with.html

The above can help you get familiar if you have missed any steps in importing the zip file

|improve this answer
  • Hi Mohit..It seems issue is with the version of Bootstrap, earlier i used v3 RC1, in that there was a issue...Later i used Bootstrap v2.3 ( stable version ) and got the exact result without any change of code!! – ForceDeveloper Aug 12 '13 at 4:15
  • Glad that it was fixed .Post as answer so that it helps others as well. – Mohith Shrivastava Aug 12 '13 at 7:16
1

The issue was with the Version of Bootstrap...Initially i used v3 RC1, the problem in that is for fonts CSS was being applied but not for layout, because of that instead of appearing as 3 columns it was appearing as 3 rows...Now that version 2.3 is used issue is fixed.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.