All Collections
Online Giving Setup
Website Setup
How do I modify the layout of Vision2 widgets on my website?
How do I modify the layout of Vision2 widgets on my website?

Using bootstrap to edit/change website themes and layouts

Tim Roberts avatar
Written by Tim Roberts
Updated over a week ago

By default the widgets load our basic CSS which is built using Bootstrap 3. 

Some elements, such as typography, have been designed to take on the look of your website. Our HTML elements have class names for you to write your own CSS overrides.

You can target all of our widgets with our general .v2 class that gets applied to the main V2 div. Also, each widget gets it's own generic class name. For example, every project browse widget you place on your site will use the class .v2-projectBrowse. And if you need to get very specific, you will find a unique id is applied to each V2 div.

Scenario 1:

Most of our clients utilize our default bootstrap layout with our widgets. That happens when we put “includeDemoCSS=true” on the script URL. You can override our bootstrap classes by using v2. Using the bootstrap UI design tools below, you will build your own styles and make them subclasses of v2.

Scenario 2: 

Some of our clients have their own bootstrap theme they want applied. In this case, you will remove the includeDemoCSS from the script URL and remove the v2 tag from our widgets. Once this is done we will respect whatever bootstrap style is on the page.

If you are not familiar with bootstrap, here is a great place to start:

You can grab themes and layouts from all over the internet. You will find that some of the layouts are free to use and some will require purchase. Here are a few resources to help you get started:

As for experimenting with and having a visual editor to modify the bootstrap style, try using one of these editors:

Did this answer your question?