VisualStrap : Visualforce Implementation of Boostrap

After around months of playing with Bootstrap and Visualforce here is a first version of "VisualStrap". VisualStrap is a set of components that work inside your visualforce page without affecting the standard layouts (if you directly import Bootstrap inside a VF page it will mess up the whole page).

With VisualStrap you can make your VF pages more appealing to user , more responsive and more user friendly. Currently the below set components are Bootstrap are converted into VisualStrap but I am working hard to bring them all.

What you get with this version of VisualStrap ?  

  • Panels
  • Alert
  • Well
  • Label
  • Badges
  • Jumbotron
  • Forms (Vertical and Horizontal)
  • Glyphicons
  • Thumbnails
  • Column and Rows (Grid) 
  • Tables (new 1.1)
  • Buttons (new 1.1)
  • ButtonGroup (new in v1.3)
  • ButtonToolBar (new in v1.3
  • Pageheader (new in v1.3)
  • Progressbar (new in v1.3)
  • Tooltip (new in v1.4)
  • List Group and List Group Item (new in v1.4)
  • Modal (new in v1.4)
  • Navbar (new in v1.4)
 VisualStrap is  available as a managed package so that it will be easy for users to upgrade it whenever a new release is released (Source is available @Github please check the project detail page) 







Where can you use it ?

Almost everywhere! But you can consider VisualStrap for pages that are exposed as Salesforce Sites or in Customer Portal. 

To get started and create some awesome UI  please follow the project link below

Documentation & Installation 

Please visit the Project page for documentation, Installation and Github link.

37 comments:

  1. Hi, Can you share the VF page for http://visualstrap-developer-edition.ap1.force.com/VSDashBoard.
    I would like to build a similar one.

    ReplyDelete
  2. Rohit its already there in the blog http://blogforce9.blogspot.in/2014/03/using-visualstrap-with-salesforce1-user.html

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Hi,

    I've created an apex chart in a component that I have placed in a vs grid. All the responsive features are working perfectly but the bars on my chart are missing. The axis appear as expected though. When I remove the c:visualstrapblock tag the bars appear. I'm using the unmanaged version.

    Thanks

    ReplyDelete
    Replies
    1. Cab you send me a sample code of the issue ?

      Delete
  5. Hi Avinava,
    I am working on a visual force based website, using your visualstrap package. Here we are failing to deliver 2 aspects:
    1). Our whole page is getting distorted when i am zooming in or zooming out.i am not able to handle it by using position or by using a wrapper around the page.
    2). When i am using javascript for validation i am failing to get the id of the components element i.e my javascript code is not reaching the element in there.
    i have used these 2 ways of fetching the id:
    document.getElementById(the form)

    document.getElementById("{!$Component.vsblock.theForm}"


    3). In navigation bar tag i am not able to resize the logo width etc which is giving a odd look to the header section.

    ReplyDelete
  6. I need to see the actual code to comment on zoom in and zoom out issue.
    2) I generally prefer using Jquery (Which is alread included in the vs). You can use endsWithSelector to directly pickup the element $("[id$="theForm"]")
    3) you can implement your own navigation bar if you want, by using the code from bootstrap.

    ReplyDelete
  7. Thanks for the quick response Avinava. Can you please give me any suggestion on keeping the page content static even when you zoom in or zoom out. I mean how to achieve such functionality?

    ReplyDelete
  8. Your providing such a valuabe information about studying..and also have some good key points to every student.
    Salesforce Interview Questions | Salesforce Training Videos | Salesforce CRM online Training Hyderabad

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Linux Online training in India – Webtrackker Technology is providing the linux online training with 100% placement support. If you are looking for the BEST LINUX & UNIX Training Institute In india or linux online training from india, live project based LINUX & UNIX online training then you can contact to us.

    Python online training in India, RPA Online training in India, Salesforce online training in india, AWS online training in india, Cloud Computing Online Training in India, SAS Online Training in india, Hadoop online training in INDIA, Oracle DBA online training in India, SAP online Training In india, Linux Online training in India








    ReplyDelete
  11. Great Information,Thanks for posting
    Professional Salesforce Training in Hyderabad@ Techiemills.
    salesforce training in Hyderabad
    salesforce training in Kphb
    salesforce training in Hitechcity

    ReplyDelete
  12. Are you looking for Best Cloud Computing training in Delhi. DIAC offering best online Salesforce training , CRM training, Salesforce Lightning - Admin developer training. Free Demo Class. Call now 9310096831.

    ReplyDelete
  13. The information which you have provided is very good. It is very useful who is looking for salesforce Online Course

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. 6-week summer course in Noida - 6 weeks The summer course plays a crucial role in shaping the career of young aspiring / informatics students. This training has been specifically introduced so that students can become familiar with current industrial culture and industrial needs. Webtrackker technology offers a 6-month training program for students / graduates that includes small and large projects.

    6-week summer course in Noida

    ReplyDelete
  16. Each department of CAD have specific programmes which, while completed could provide you with a recognisable qualification that could assist you get a job in anything design enterprise which you would really like.

    AutoCAD training in Noida

    AutoCAD training institute in Noida


    Best AutoCAD training institute in Noida

    ReplyDelete
  17. Video editing course in Noida
    Video editing training institute in Noida- Webtrackker Technology is and IT Training institute providing the Video editing course in Noida, FCP, Final Cut Pro Training in Noida. For more call us- 8802820025.
    Video editing course in Noida
    Company Address:
    Webtrackker Technology
    C- 67, Sector- 63, Noida
    Phone: 01204330760, 8802820025
    Email: info@webtrackker.com
    Website: http://webtrackker.com/Best-training-institute-Video-editing-FCP-course-in-Noida.php

    ReplyDelete
  18. Very nice post here thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.
    simultaneous interpretation equipment
    conference interpreting equipment
    tour guide system
    silent disco headphones
    electronic voting pads
    laser barcode scanner
    bosch simultaneous interpretation system

    ReplyDelete
  19. Cloud Computing Training In Noida
    Webtrackker is IT based company in many countries. Webtrackker will provide you a real time projects based training on Cloud Computing. If you are looking for the Cloud computing training in Noida then you can join the webtrackker technology.
    Cloud Computing Training In Noida
    Company Address:
    Webtrackker Technology
    C- 67, Sector- 63, Noida
    Email: info@webtrackker.com
    Website: www.webtrackker.com
    http://webtrackker.com/Cloud-Computing-Training-Institutes-In-Noida.php

    ReplyDelete
  20. Like different elements of India, numerous oil and spices usually cross into making food. This effects in substances getting caught to the partitions of the filter out.
    Visit here
    Best kitchen chimney installation and service
    Auto clean chimney sevice in Faridabad

    ReplyDelete
  21. Great blog..Well explained,it was really informative and useful.Thanks for sharing..keep update | hadoop developer skills Set | hadoop training course fees in chennai | Hadoop Training in Chennai Omr

    ReplyDelete
  22. A model is a person with a function either to sell, show or market it industrial products (appreciably style garb in style indicates), or to serve as a visual useful resource for individuals who are creating works of artwork or to pose for images +919910294610.
    Arvind Rawat model in Noida
    Visit here
    Arvind Rawat Model in Noida

    ReplyDelete