Only part of the style.css is applied

Bootstrap Studio Help
1

Dear community,

I exported my pages and although the style.css is clearly included in the in the (relative path as I’m in local), the .html doesn’t read all the classes.
I can see that my heading are used but all the colors, padding… are not.
And of course if I put a color directly in the HTML, it does work.

How come that only part of the style of my css is applied?
Can you help me to prioritize my style.css over bootstrap files?

Thank you for your precious help, I already spent so many hours on this…

SolweigH

2

Make sure to check the order of your CSS and JS files periodically when you add new ones as they can sometimes get out of order. For the CSS the main thing is that your custom style sheet file should always be last.

Right click on the word Styles title in the Design Panel and you’ll get some options in a dropdown. Choose “Include Order” and drag and drop the files in the window that pops up to put them where you want them. This works for both CSS and JS and any SCSS shows up in the Styles one.

3

Thank you jo-r for your answer!

Actually I realised indeed that if I’m simply exporting it is working.

But I wanted the 5 pages of my website to use the common files, so I grouped them all and this is where it is problematic.

Anyway, I was a functionning solution.

Thank you for your explanation, it helps a lot! :bouquet:

Cheers.

1 Like
4

You’re quite welcome.

I’m not sure what you are talking about with grouping them all, but all css/fonts/js/img files are shared with all pages default. You can change this for the CSS/SCSS or JS if you only use something on a specific page(s). Right click over the css file and you can choose Visibility and then set it up so that it is only visible on that page(s). Same for the JS. Hope that helps a little more and happy coding/dragging :wink:

And the best feature of all in my opinion is the Linked Components! Check that out too! There’s a nice tutorial on that in the Docs if I recall. :bookmark_tabs:

5

Thank you very much for those extra explanations.

First I finally solved my problem regarding the application of style.css. It was because of my comments in the file :roll_eyes: there were extra unnecessary / :roll_eyes:

Regarding the common files, I worked as following
• Creating a page with its style and other components
• Duplicating the page to serve as a base for my second page, etc.
So each page had its own files (img, css, bootstrap…) while I wanted to have 1 folder for all the pages with “img” having the images of all the pages, “css” all the css for all the pages + 1 style.css with all the style applied to all the pages of the project…
But after having spent hours on learning how to use Bootstrap studio and building my site, I have this feeling that I should change my method and next time I will try this Visibility menu and have a look at that component tutorial.

Thank you again !

1 Like