# Bootstrap Integration

If you are familiar with web design, you probably know about Bootstrap. 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](https://getbootstrap.com/).

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

### CSS <a href="#bootstrapintegration-css" id="bootstrapintegration-css"></a>

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.

   <div align="left"><figure><img src="/files/c9K9p1M9t2y5QQeaWGaY" alt="" width="375"><figcaption></figcaption></figure></div>
3. Go to Checkout Champ, and open code editor.

   <div align="left"><figure><img src="/files/0SBY2Uut9JC7kTOFpP5Z" alt="" width="400"><figcaption></figcaption></figure></div>
4. Find the element you want to change.

   <figure><img src="/files/1qMvy1Gje5hXlnBke4Pf" alt=""><figcaption></figcaption></figure>
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’

   <figure><img src="/files/jD8RWX4wZ2ZvXG6mF4q2" alt=""><figcaption></figcaption></figure>
6. Save the code editor and now see the changes!

   <div align="left"><figure><img src="/files/EGD1XWZBBLbv4CJZmkSi" alt=""><figcaption></figcaption></figure></div>

**Note:** This should work for any Bootstrap class. If it does not, check for other classes that may be interfering with bootstrap, or even other bootstrap classes like in the example above. Save often and regularly to avoid unwanted changes.

***

## Examples

### Float

<figure><img src="/files/KqTb8084370K9r4TAPUt" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/9QUe113uIG1isDneAxzf" alt=""><figcaption></figcaption></figure>

For more information: <https://getbootstrap.com/docs/4.0/utilities/float/>

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/bootstrap-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.