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.
This thread is absolutely dizzying. I just did a quick scan. I will give you a very helpful suggestion @GoActive … there are users here that will be happy to help you figure out how to use the program, but I suggest the following…
We all do this help stuff out of the goodness of our hearts. I’ll help anyone figure out how to use a feature in BSS, or even write up a little tutorial to get them past a sticking point, but I’m certainly not going to spend an hour reading through a thread with 30 posts that will take me an hour to read just so I can try to figure out what skills you lack that are creating so many roadblocks for you. It’s up to you to learn the software, and learn to build websites. It’s up to me to help people get past the little speed bumps they encounter.
As the saying goes, “start with the end in mind.” If you want to create websites, learn the languages that are used to make them… HTML, CSS and Javascript (at minimum.) When you are at least familiar with these things, then AI becomes an amazingly helpful ASSISTANT, and not the developer of the website.
Bootstrap Studio gives you free hosting, so it’s easy enough to publish whatever is giving you a fit, so that people can look at the code and try to solve your issue. Not being able to see the code is tantamount to a person posting, “My car is making a ticking noise, can anyone tell me what it is?” But then they don’t post a video allowing us to hear the noise. It’s like exploring a cave in the dark,
Hope this helps you a bit.
I did post a live link to the site after I finally posted the site live. Originally when I started this it was not posted live.
I’ve watched probably most every video that is out on Bootstrap Studio, including some from other people other than Bootstrap Studio.
I’ve spent countless time in the help files… …going through things That’s how I learned to connect my nav and footer together and create the whole entire blog posting area, even with the filtering..
And yes, I am using AI because AI is being used by lots of people for making websites now It’s basically replacing the older way of designing sites. It’s all coming down to telling the AI how to do it correctly with whatever program you’re using.
I now have that worked out it looks like. I posted that information and then that was flagged and taken down.
There’s a lot of items in the BSS help area, if you look, that have never been finished.
Here is the current live site. AI has created every single page. I’ve only edited them a little bit changing some text. The first version that I had AI do, it had a lot of problems It made it wrong because it did not understand how Bootstrap Studio worked.
Now that I’ve basically figured out how to tell AI how Bootstrap Studio works By having the AI figure it all out and write me an Instruction page to provide to it.,
It redid all these pages, including the blog post pages. It’s created graphs, charts, things that would have taken me months to do. It also created my titles and meta information for each page.
And I’m getting very good page scores now.
I still have more to do here to fix little minor things here and there and double-check some of the content but overall everything it seems to have created is accurate.
I have a lot of images I will be replacing on different pages From real photos that we took. And from some video frame graphs.
I think I’m going to add some kind of a news area I guess similar to just a second blog that just provides updated news because there’s lots of things going on each week different festivals events and so on trying to figure out a good way to do that.
Quickly looking over your website code, I don’t see any glaring errors that would suggest AI is incapable of coding a functional page. But what I do see (or maybe it would be better to say what AI does NOT see) are numerous UI choices that I, as a developer, would immediately consider to be problems. AI completely ignores them because it’s not a human actually LOOKING at your website.
Please take this as constructive criticism. I’m not trying to tear your website apart, but rather help you understand why it’s so important that human eyes not only look over the code, but look over the actual pages at all different screen sizes and USE the website…
There are layout issues on your website that an AI just simply cannot see. Foremost… when I look at your home page on my phone, the brand text in your navigation menu (Panama Living Guide) is so long that it causes the hamburger menu icon to jump down to a new line, which then causes the Navigation to partially block the first line of text on your home page. This is a significant layout issue to which AI simply won’t alert you.
A website targeting (potential) retirees should be focused on WCAG compliance. This is something to which AI is oblivious, but a human auditor would immediately see it. Your navigation menu uses an inline (undesirable) CSS rule to set the font size at 12 pixels. As someone who is approaching retirement age myself, I already need reading glasses to use my phone. Sure, I can zoom the screen or increase the scale via the browser, but 16 pixels is generally considered the minimum font size for websites in terms of best practices. Also… light blue text on a dark blue background is a questionable choice, considering your visitors may not have the greatest vision. These are things AI just can’t catch.
Your hamburger menu… the svg lines that are almost black on dark blue make them very hard to see. Even for someone without visual impairment, it’s hard to tell this is a menu. For someone with visual impairment, they might miss it completely.
Your buttons…
.btn:hover {
transform: translateY(-1px);
opacity: .96;
}
Why? A one pixel shift is so minute that it ends up feeling more a UI aberration than a conscious design choice. And changing the opacity from 1 to .96 does virtually nothing. If this was the AI’s doing, it makes no sense. If it was your choice, why didn’t the AI alert you as I did? Answer: because AI doesn’t know any better.
Your towns… When I go to the pages, your navigation menu is blocking the yellow badges that have the regions listed. Why doesn’t AI see this? Because it can’t.
Your FAQs accordions… maybe this was a conscious choice, but once one is opened, there’s no way to close them fully without reloading the page. Not sure if this was AI’s doing, or something else.
Your More Pages link… on this page you have a series of links across the top with 10 pixel text in them. This is way too small even for people with good vision.
Explore Key Topics… I presume these will eventually be links to guides, and are still a work-in-progress. If not, they’re not working. And again, I question the font size (14 pixels) and even the color. --bs-secondary-rgb: 108, 117, 125; on a white background this doesn’t have enough contrast to pass WCAG. This is why your Lighthouse score (91) is taking a hit. AI doesn’t understand this, which further illustrates why leaving development in its hands is risky.
There are other issues throughout the site that would detrimentally affect visitors using screen-readers. Lots of links have no titles or aria labels. Images are missing alt tags. Again, this is important when you’re building a website that will likely be visited by elderly people who may have vision impairment. This website may be helpful.
The head section is a bit of a mess. If AI did this, it didn’t do a good job. The stuffed keyword tag is completely unnecessary. Google has ignored meta keywords for over a decade. You’ve got the exact same jpg icon repeated four times. styles.min.css is called twice. ionicons.min.css (via CDN and local assets) is called three separate times.
There are tons of inline styles that should be moved to external CSS stylesheets. AI should not be writing inline CSS, but if it’s looking at your code, it’s also failing to alert you to this. Inline CSS is a maintenance nightmare down the road.
You’re calling a JS file named smart-forms.min.min.js. I see that the file is valid (despite the improper .min.min naming convention) so I must ask why is min duplicated? Was this the result of AI generation, or just a typo? I’ve made typos like this myself, but this is the sort of thing that an AI actually would complain about if it audited your website.
Again, I’m not trying to discourage you. I hope this post helps you out.
