How to load Bootstrap Framework in custom HTML

1. Introduction.

2. Step by step.

3. Other specifications.

4. Related content.

1. Introduction.

When working with custom HTML in your campaigns, you can load external libraries such as the Bootstrap framework to help with design and layout. This tutorial explains how to do it.

When you enable custom HTML (independently for each screen), all default page customizations are removed, allowing you to include the individual elements that make up the campaign, as detailed in the tutorial Advanced customization with your own HTML. A basic HTML structure and CSS are kept to control the elements common to all campaigns: login popups, legal terms, campaign sharing, and alert messages.

2. Step by step.

With custom HTML you can customize the content and elements you need, as well as load external libraries such as the Bootstrap framework.

To include Bootstrap, insert the CSS link after <!-- {{{ cool_tabs_head }}} --> and before the closing </head> tag, and load the JavaScript before <!-- {{{ cool_tabs_body_end }}} -->:

<!DOCTYPE html>

<html {{{ cool_tabs_html_attributes }}} >

    <head>
        <!-- {{{ cool_tabs_head }}} -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>

    <body {{{ cool_tabs_body_attributes }}} >
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <!-- {{{ cool_tabs_body_end }}} -->
    </body>

</html>

From here, you can include the elements you need using our {{handlebars}} system and customize them with your own CSS (or SCSS if you prefer).

On the Form screen you can also enable the 'Include some basic CSS in the form page' option to load the CSS of our campaigns and get the default quiz and form styling.

Keep in mind that if you use Bootstrap, you must include it in every screen where you want to use it, except the Form screen when you have 'Include some basic CSS in the form page' enabled. In that case Bootstrap is loaded automatically.

3. Other specifications.

If you have any questions, contact us at help@cool-tabs.com.

4. Related content.

Advanced customization with your own HTML.

Advanced customization of a campaign using variables.

How to configure custom CSS for your campaign.