Landing template not work

[AndreaSpuri]

Hello!

I'm a noob in Hubspot and I have this real big problem that I can't understand.
I've made a drag&drop template for landing pages as u can see in the pic. I've code all the modules inside the template with Boostrap 5.0 that I've injected inside the template. 

As u can see in the template preview everything work fine.
I would take as example the link in the footer, coz like I coded in the custom module I set the link color to "blue".

But when I create a new landing with my custom template, something go wrong.
First, in the editor I can't see the footer and the logo at the top is not centered.

But when I see the preview of my page, it lost the font-size, the w and h of the button in the header and the link in the footer is white. Why?
I've checked the code and I can't understand why that link take the css rule "white" while I set the colors of links, with blue. 
As u can see in my module there are these css rules for link.

But the browser give me this rule for the link, idk why!

white color in the browser but blue color in my custom module, why?
Pls, help me 😣

[webdew]

Hi @AndreaSpuri ,

Inside html+hubl please add this name class before container-fluid class as shown below

<div class="{{name}}">

    <div class=”container-fluid”>

//your rest code here

     </div>

</div>

And add .{{name}} in all your css like this 

{% require_css %}

<style>

.{{name}} .container-fluid .col{

text-align:center;

}

.{{name}} .col a{

color:#000ac3;

text-decoration:none;

}

</style>

{% end_require_css %}

Note:- Keep css  below your html code inside html+hubl as shown in below image

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards. 

[AndreaSpuri]

I've tried but nothing happened.

I've checked other stuff.

I've add a button with Bootstrap ofc, and there is this rules.

padding: 0.375em 0.75em;

But in the template preview the button is perfect but in the landing preview is a bit smaller, I can't understand why.

And in the landing editing page I can't see the footer, I can edit it but I can't see it.

Let's see that screen.

[Kevin-C]

Hey @AndreaSpuri 

I might bet that the issue is a conflict between hubspot default styling and boostraps.

Try using the build in grid and then your custom css on top of that.

As for the footer text color that is odd. The minified module.css file leads me to think you might need to clear your cache, or the styling is coming from another module or css file. Inspecting the minified file will help diagnose.

Hope this gets you moving! And don't hesitate to reach out!

[AndreaSpuri]

Thank u so much for helping me. 

I tried some stuff, I've add Boostrap.css inside the module and add !important to my rules, and something is changed.

As u can see below, on my link -a there are 3 different rules.

The first one is the css rule i've add inside my custom module.

The second one is from Boostrap.css 5.1.3

The third one is from Bootstrap.css 3.1

So as I can understand, I need to overwrite the other rules with mine, now something has sense for me.

So, without !important on my rules, the template take the Boostrap 5.1 css rules and stop.

Maybe?