Bootstrap Integration

If you are familiar with web design, you probably know about Bootstrap. For those that don’t, Bootstrap is a CSS framework, or a library of pre-written CSS that you can add to your project to save time and create uniform design. You can read more about it here.

All Checkout Champ pages use Bootstrap, so here are a few ways you can make use of it when designing your pages.

CSS

If you go to the ‘Docs’ page of the Bootstrap website, you can see all the prebuilt components and styles. From there, all you need to do is add the class or classes to the element in Checkout Champ in order to call on that particular style in Bootstrap. Here’s an example:

1. Find the element you want.

2. Copy the class you need for that element.

   Open

   

3. Go to Checkout Champ, and open code editor.

   Open

   

4. Find the element you want to change.

5. In this case, our button already uses the ‘btn’ and ‘btn-primary’ classes from Bootstrap. So if you want to change it, just delete the ‘btn-primary’ class and add ‘btn-success’

6. Save the code editor and now see the changes!