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
Solved! Go to Solution.
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.
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.
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...