I’m pretty certain it’s either your HTML is not using Bootstrap classes, or the CSS is not being imported correctly by the application and it’s stripping out the inline styles.
If it still doesn’t work, can you send me the raw HTMLs file you’ve been trying to import.
Yes that worked. Thank You,
New screenshot. Just putting in styles CSS it renamed it to styles 1. I had to remove the styles tag at the top and the bottom because it wouldn’t import until I removed that.
Why would ChatGPT and the other AIs not know to separate out the CSS? Style for this?.
I guess I’m going to have to try to tell it this, so it gives me two files and see if that works.
If I have the AI create multiple pages on the site, will it have to have multiple different style sheets for each page?
Because AI is stupid, and I cannot stress this enough - they don’t know anything about Bootstrap Studio, they haven’t been trained on the docs, they cannot see screenshots on the WiKi and wrong answers on the forums cause them confusion.
They also want to optimise token use, and they do not prioritise best web standards unless asked.
You almost NEVER want inline styles on a page. It’s insufficient and large inline styles causes page bloat size rather than breaking the files down into smaller chunks, that’s why we have CSS files and JS files.
Yes, if you prompt it badly and it has no context for the other pages being generated.
Remember, you’re using a CSS framework, you don’t want the AI to create loads of custom CSS unless necessary, and in my experience ChatGPT creates overlay complex CSS that has far more CSS required for the effect you want.
You should ideally try a program like Cursor that can do the heavy lifting for you, and lets you give Rules to your agents. You should also become more familiar with web fundamentals and with the Bootstrap Studio application, rather than outsourcing all your thinking to AI.
I’m using Perplexity, the Comet desktop version.
So far, ChatGPT does not seem to be able to produce the CSS or stylesheet separately. It keeps trying. I’m on the sixth try now. It says it’s doing it each time, but then there’s nothing there.
it will say
You should now have a downloadable CSS file named:
style.cssbut gives no file to dl.
Here’s what it says on try number 7.
So the honest answer is: I cannot reliably give you a downloadable CSS file through this interface right now, even when I generate one.
If you want an AI to generate something…
Tell it to use Bootstrap 5.3 as the foundation.
And leave out animations for now.
Then, have it generate an external CSS file; you can open the HTML—90% of it should be recognized correctly, though sometimes a little fine-tuning is required.
That is why we need the code—so we can take a look at it ourselves.
I changed it over to Claude and then Claude was able to not give me a downloadable style sheet but it was able to write the code and then I was able to turn that into another style sheet and that works.
Here’s a new page that it created as a test and then I put the style sheet in.
Yes, I agree. AI is very dumb on a lot of things. I have to argue with it all the time on many different topics where it gives me wrong information repeatedly. I even have to give it website links to show it something and then it comes back and apologizes and admits that it was wrong. Anything new that’s just come out, it has no clue about and it will even say what I’m asking about does not exist until I show it does to it.
I think I’m going to start this project over from the start. This is going to be my first bootstrap studio larger website. There will be a lot of pages done over time with the blog layout structure needed.
We will be moving to the country of Panama after we get our house sold and want to work on a way to promote our videos we make and possibly sell some kind of moving guide or something.
Other websites I’ve been working on. I’m at a standstill now waiting for information from the owner of the sites to provide Me access to one of the sites that needs to be moved and access to images that need to be changed over. He’s not provided any of that yet.
I guess I’m not understanding how to put the code in here for you to see because I cannot drag it in it won’t allow me and when I paste it in apparently it’s not the right way?
I uploaded a few of the HTML files that it had created if you want to take a look at them.
I tried the free version of Kimi K 2.6 Agent And wow, this is what it made. It made a sample link you can see. And it created all the images as well. I just downloaded it all. I’m going to see if this loads in. It says it separated everything and it’s going to use the bootstrap. Color styles, primary, secondary, and so on.
Here’s the sample link it gave me.I’m really happy with this version. Much better than what Chat GPT did. I think this would be a good starting point to then build the rest of the pages on.
Here’s the file structure that Kimi K 2.6 agent created. It gave me all the files, I loaded everything in, and it works. Looks just like the sample link.
Even the number counter and temperature counter work.
And it is using the colors I have set in Bootstrap Studio. It changed them over too. I have to tweak that out a little bit. Some of the menu items are black when they should be white. Due to that.
you can only build using the program it will not let you use outside sourced pages, I had the same issues, The program is designed for what is inside ready provided. I bought temples thinking this would let me edit, I use dreamweaver for those and ones I made like you did. for my personal sites, I build most parts for a directory, and made the site face basically like you did using AI, fit all the linked areas on the domain. And AI only lets you do a one page unless you pay for a pro version to have a full coded one. that’s whats breaking on yours if its a one page multi layer. I use claud
I did get it all to work. In fact, you can even do it a different way as well.
Here’s an example link that I did today.
and This one, both names similar, but they are different pages.I was testing this on… Volcan, Panama | Living & Retirement Guide — Costs, Climate & Lifestyle
What you can do is drop in the custom code item. This gives you a full HTML area to put in any HTML code.
Double click on it and then take all your HTML from your template or I’m having AI create this for me I’m using Kimi K 2.6 agent just paste your code in there and say Apply and there’s your whole entire page.
Then go to that custom code and change it over to…Convert to Components And then it makes everything editable That you just brought in. I just did that On both of these pages today And that’s working 100% now.
Here I just took a bunch of screenshots to show how to do this.
I didn’t see this anywhere in any of the help guides videos or anywhere
Here I’m starting with basically a template page where I have my navigation bar in my footer there’s nothing in between it.
Now I add this custom code from the menu system in between my nav bar and my footer.
Then over in your right side code area, double click on custom code and it brings up that area. And just backspace everything out and just copy all your HTML from a finished page. From like AI or whatever. And paste it in there. As you see.
Then click on the apply button and then your whole website is there from the html that you put in.
Now click on the custom code and from the drop down menu, pick convert to components. Because right now your whole page is there, but nothing is editable in Bootstrap Studio, you’ve got to convert it.
And then when you convert it you can see it’s created all the all of these sections And all the items on the page are now editable
When I have AI create my pages, I tell it to do it in multiple sections. That way I have control of each section. And I can change the color of a section, or if I don’t like a section, I can just remove it. If you don’t tell the AI to do it in sections, it will do it all as one long HTML page.
Also what I’m having Kimi Also I’ve spent most of the day setting up and playing around with and learning how the blog setup works.
It really does work as good as a WordPress blog basically. And I like the fact that each blog page, since it’s not a real blog page, can be actually a real page.
So it doesn’t have to have the same look for every page. And you can use it, instead of as a blog, but to filter different pages.
Under my heading of “Moving” I’m going to have multiple pages on “Moving” but I’m going to use the blog feature to be able to filter them and show them on the blog loop page for people to pick the articles that they want to see for moving .
Kimi 2.6 works very good it’s doing as many pages as I want. You actually take off from where you left off and you could just keep adding more pages and it even links in the new pages to the base homepage that it made for you to start with.
I’ve made a few template pages for like a blog post and for some other pages that I need to then just change out with new information.
So now that I’ve got this figured out, this is going to make things a hundred times more easier in Bootstrap Studio to use AI or templates. And I use Live Canvas when I’m doing things in WordPress, which Live Canvas creates HTML as well. So I could literally build something either in Live Canvas or Bootstrap Studio and bring it into Bootstrap Studio.
good deal, yea i’m always finding an easy way to manipulate the code to wok in my favor, lol hehe old school brains here, not used to all the new stuff, been working with bootstrap a long time, I actually like it cause the smoothness and response. more cleaner than to heavy as being on net since 98- yea lots of sites would be to heavy you could feel it. My most fav had always been PHP.
