Hello Everyone, In this tutorial, we are going to know about VisualStrap that we used in our Visualforce pages and Visualforce components to make it user-friendly and responsive.

 After completing this tutorial, you will able to:
  • What is Visualstrap?
  • Why we use Visualstrap in Visualforce page and component?
  • How to install VisualStarp App from app exchange? 
So let's begin,

VisualStrap contains bootstrap CSS that we used to build awesome UI using Visualforce page. Visualstrap contains so many component syntaxes that very similar to standard Visualforce component syntax. All component that VisualStrap contains is fully optimized.

            In other words, It’s a set of components that we used inside our Visualforce page to build more appealing UI for users. Those UI who are build using Visualstrap is responsive, user-friendly. It responsive grid system used to deliver content in different screen sizes.

Important: VisualStrap contains mobile ready Visualforce component based on bootstrap. 

What you get in Visualstrap:
  1. Alert
  2. Badges
  3. Panels
  4. Well
  5. Label
  6. Jumbotron
  7. Forms (Vertical and Horizontal)
  8. Glyphicons
  9. Thumbnails
  10. Column and Rows (Grid) 
  11. Tables 
  12. Buttons
  13. ButtonGroup 
  14. ButtonToolBar 
  15. Page header 
  16. Progressbar 
  17. Tooltip 
  18. List Group and List Group Item 
  19. Modal 
  20. Navbar 
To install "Visualstrap" in your Salesforce Org. click on below link:
Step 1: Click on "Get It Now" button that is highlighted in the below image.


Step 2: Click on the "Log in to the AppExchange" button.

Step 3: Provide your salesforce login credential and Click on "Log In" button.



Step 4: Click on "Install in production" button, if you install it in Developer org. or any other paid license of Salesforce; otherwise, click on "Install in Sandbox" button.


Step 5: Tick on "I have read and agree to the terms and conditions." and then click on "Confirm and Install" button.


Step 6: Select one Installation option that you think suitable for your Salesforce Org. and click on the "Install" button. 

Step 7: Wait, until it installs in your Salesforce Org. 



Step 8: After successfully installation below screen will visible, then you have click on the "Done" button.



Congratulations, Visualstrap is successfully installed in your Salesforce Org. Now you can use it in visualforce page or components.

Example :
 <apex:page doctype="html-5.0" showheader="true" sidebar="false">
 <vs:importvisualstrap theme="default">
 <vs:visualstrapblock>
 <vs:panel title="Demo Panel Primary" type="primary">
 </vs:panel>
 <vs:panel title="Demo Panel default" type="default">
 </vs:panel>
 <vs:panel title="Demo Panel Info" type="info">
 </vs:panel>
 <vs:panel title="Demo Panel success" type="success">
 </vs:panel>
 <vs:panel title="Demo Panel warning" type="warning">
 </vs:panel>
 <vs:panel title="Demo Panel danger" type="danger">
 </vs:panel>
 </vs:visualstrapblock>
 </vs:importvisualstrap>
 </apex:page>

See also:

Conclusion:
Hope you like this tutorial, for any query or suggestions please feel free to comment.
Thank you.