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.

  • 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 '14 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 '14 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 '14 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 '14 at 17:42
  • Are you talking about VF pages with or without Salesforce headers (tabs, standard UI)? – greenstork Apr 11 '14 at 19:49
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.

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>

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.