SOLVED

Bootstrap for landing pages

Go to solution
LeaCharnley
Level 2

Bootstrap for landing pages

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
1 ACCEPTED SOLUTION

Accepted Solutions
Christian-TLS
Level 2

Re: Bootstrap for landing pages

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

3 REPLIES 3
Christian-TLS
Level 2

Re: Bootstrap for landing pages

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
Level 2

Re: Bootstrap for landing pages

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
Level 5

Re: Bootstrap for landing pages

Hi @LeaCharnley.,

 

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

 

Thanks!

Jasbir