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.


  1. Hi, Can you share the VF page for
    I would like to build a similar one.

  2. Rohit its already there in the blog

  3. This comment has been removed by the author.

  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.


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

  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)


    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.

  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.

  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?

  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

  9. This comment has been removed by the author.