Re: Bootstrap for landing pages

LeaCharnley · ‎04-25-2023

Can anyone advise if I can deploy Bootstrap into Marketo to help with building my landing pages. It kind of seems to half work with the columns and rows. If I can, where do I need to add the code?

Thanks

Lea Charnley

Christian-TLS · ‎04-25-2023

Hey Charnley,

for sure!

You need to include the Bootstrap files between the opened and closed head tags of your Landingpage Template.

<head>

...

</head>

For example if you want to add Bootstrap 5, you can use the following cdn calls:

<head>
...
<script href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
...
</head>

https://getbootstrap.com/docs/5.3/getting-started/introduction/

If you don't like the cdn approach you could download the Bootstrap files and host the files you need/want in "Design Studio" -> "Images and Files", as soon you have uploaded the files, you will be able to get the URL to the files.
This could look something like (just swap everything inside the href="" with your link):

<head>
...
<link rel="stylesheet" type="text/css" href="https://mydomain/rs/marketoID/images/bootstrap4.min.css">
<script type="text/javascript" src="https://mydomain/rs/marketoID/images/popper.js"></script>
<script type="text/javascript" src="https://mydomain/rs/marketoID/images/bootstrap4.min.js"></script>
...
</head>

As soon you have your added the Bootstrap files in your template you are good to go.

View solution in original post

Christian-TLS · ‎04-25-2023

Hey Charnley,

for sure!

You need to include the Bootstrap files between the opened and closed head tags of your Landingpage Template.

<head>

...

</head>

For example if you want to add Bootstrap 5, you can use the following cdn calls:

<head>
...
<script href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
...
</head>

https://getbootstrap.com/docs/5.3/getting-started/introduction/

If you don't like the cdn approach you could download the Bootstrap files and host the files you need/want in "Design Studio" -> "Images and Files", as soon you have uploaded the files, you will be able to get the URL to the files.
This could look something like (just swap everything inside the href="" with your link):

<head>
...
<link rel="stylesheet" type="text/css" href="https://mydomain/rs/marketoID/images/bootstrap4.min.css">
<script type="text/javascript" src="https://mydomain/rs/marketoID/images/popper.js"></script>
<script type="text/javascript" src="https://mydomain/rs/marketoID/images/bootstrap4.min.js"></script>
...
</head>

As soon you have your added the Bootstrap files in your template you are good to go.

LeaCharnley · ‎06-26-2023

That's awesome, Christian. Thanks.

I uploaded v5, but it seems to have broken the Marketo Quick Start LP Guided template. Now it won't let me reload the original v 3.3.7...

Lea Charnley

Jasbir_Kaur · ‎06-28-2023

Hi @LeaCharnley.,

If you can share your code, we can guide you better.

Thanks!

Jasbir