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.

Project Link : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61

Related Posts



Posted by at
Labels: , , , , , , ,

25 comments:

  1. RohitMarch 24, 2014 at 8:13 PM

    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. AviMarch 24, 2014 at 9:26 PM

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

    ReplyDelete
  3. BFAMay 1, 2014 at 6:04 AM

    This comment has been removed by the author.

    ReplyDelete
  4. UnknownMay 8, 2014 at 10:38 AM

    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. AviMay 8, 2014 at 10:58 PM

      Cab you send me a sample code of the issue ?

      Delete
  5. UnknownOctober 29, 2014 at 3:51 PM

    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. AviOctober 29, 2014 at 4:28 PM

    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. UnknownOctober 29, 2014 at 7:15 PM

    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. rah=jivJanuary 15, 2017 at 2:02 PM

    This comment has been removed by the author.

    ReplyDelete
  9. DoorstephubDecember 22, 2017 at 3:23 PM

    I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing.
    Salesforce Online Training in Hyderabad, Salesforce Online Training in Kukatpally
    Salesforce Online Training in Madhapur, Salesforce Training in Kukatpally, Salesforce Training in Madhapur

    ReplyDelete
  10. TechiemillsDecember 22, 2017 at 3:39 PM

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

    ReplyDelete
  11. Arvind RawatAugust 6, 2018 at 9:02 AM

    This comment has been removed by the author.

    ReplyDelete
  12. AnonymousAugust 14, 2018 at 10:09 PM

    amazon offers and deals

    amazon coupon code

    amazon deal of the day

    cleartrip promo codes

    cleartrip coupon code

    cleartrip offers and deals

    cleartrip deals

    MMT promo Codes

    MMT coupon codes

    Makemytrip promo codes

    makemytrip offers

    makemytrip deals & offers

    healthkart coupon code

    healthkart promo codes

    healthkart deals and offers

    healthkart discount offers

    bigbasket promo codes

    bigbasket coupon codes

    bigbasket offers

    bigbasket coupon and deals

    ReplyDelete
  13. AnonymousAugust 14, 2018 at 10:09 PM


    Firstcry Offers on Kids shopping

    Myntra promo codes

    Myntra deals and offers

    Myntra coupon codes

    Myntra coupons offers promo codes

    Myntra offers on online shopping

    Nykaa Promo Codes

    Nykaa Deals and offers

    Nykaa Coupons codes

    Nykaa coupons offers promo codes

    Nykaa offers on online shopping

    Flipkart promo codes

    Flipkart deals & coupons

    flipkart coupon code

    flipkart coupons offer promo code

    Amazon promo code

    amazon offers

    ReplyDelete
  14. AnonymousAugust 22, 2018 at 1:45 PM

    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
  15. UnknownSeptember 12, 2018 at 10:49 AM

    thank you your post was knowlable to me
    rpa training institute in noida
    sas training institute in noida
    hadoop training institute in noida
    blokchain traninig institut noida


    ReplyDelete
  16. UnknownSeptember 28, 2018 at 1:03 PM

    click here for more related stuff in tech oneplus c type earphone.

    ReplyDelete
  17. UnknownNovember 11, 2018 at 5:02 PM

    Thanks a million and please keep up the effective work R Programming Training in Chennai | R Programming Training in Chennai with Placement | R Programming Interview Questions and Answers

    ReplyDelete
  18. UnknownNovember 12, 2018 at 3:23 PM

    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
  19. tanmaychaubeyJanuary 25, 2019 at 12:25 PM

    Microsoft Azure Training institute in Noida,

    AWS Training Institute in Noida sector 16,

    Cloud Computing Training Institute in noida sector 16,

    Data science training institute in noida sector 16,

    Data Science With machine learning training Institute in Noida sector 16,

    Data Science With python training Institute in Noida sector 16,

    Web-designing Training Institute in Noida sector 16,

    ReplyDelete
  20. tanmaychaubeyJanuary 25, 2019 at 12:25 PM

    software-testing Training Institute in Noida sector 16,

    Digital Marketing Training Institute in noida sector 16,

    hadoop Training Institute in noida sector 16,

    Java Training Institute in noida sector 16,

    linux Training Institute in noida sector 16,

    node.js Training Institute in noida sector 16,

    openstack Training Institute in noida sector 16,

    Oracle DBA Training Institute in noida sector 16,

    ReplyDelete
  21. yamunaFebruary 22, 2019 at 5:47 PM

    Blog is very nice
    Hadoop Online Training
    Datascience Online TRaining

    ReplyDelete
  22. yamunaFebruary 26, 2019 at 5:10 PM

    Thank you blog very nice
    Hadoop Online Training
    Datascience Online TRaining

    ReplyDelete
  23. yamunaMarch 29, 2019 at 4:54 PM

    Thanks for sharinig blog is very useful
    Data Science Training in Hyderabad
    Hadoop Training in Hyderabad

    ReplyDelete
  24. svrtechnologiesJanuary 6, 2020 at 6:06 PM

    Thanks for posting such an informative stuff..

    Salesforce Online Training

    ReplyDelete

Subscribe to: Post Comments (Atom)