0

I want to make my visualforce page responsive. I want two column layout to display values of a record. Just like a detail page(Standard Salesforce page) of any record, Where two-column layout is there.

I am not getting right css or approach.

Improve this question
5
  • Bootstrap provides a complete set of styles for all common page elements and so does Salesforce. They are not designed to work together. Is your goal to just make a standard Salesforce detail page responsive and keep the Salesforce styling as much as possible? Or are you trying to replace the Salesforce styling with Bootstrap styling?
    – Keith C
    Apr 11, 2014 at 13:06
  • I am creating a new VF page similar to Detail page but i want to make it responsive and i am not getting how to design two-column layout displaying record values.
    – Pankaj
    Apr 11, 2014 at 13:13
  • If multi-column layout is your goal, CSS focussed on that problem might be a better place to start - see e.g. designinstruct.com/web-design/responsive-css-grid. I think you should change the title of your question to be specific.
    – Keith C
    Apr 11, 2014 at 13:47
  • Adding what code you've already written may help others understand where specificly you need help. Using JS/CSS frameworks are usually best done with disabled SF styles, at that point they shouldn't be that hard to use.
    – Samuel De Rycke
    Apr 11, 2014 at 17:42
  • Are you talking about VF pages with or without Salesforce headers (tabs, standard UI)?
    – greenstork
    Apr 11, 2014 at 19:49

2 Answers 2

Reset to default
2

If you want to use Bootstrap for 2 columns and make it responsive use classes "Row" & "col-md-6". Bootstrap site has heavy set of examples and very good documentation on how to use these classes.

Improve this answer
0

Late to the party, but this is how you can use bootstrap in your VisualForce page -

<apex:page>
  <!-- Adding CSS -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />

<div class="container">
    <div class="row">
      <div class="col-md-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
      <div class="col-md-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
    </div>
</div>
</apex:page>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .