So a few days ago I figured out how to override locked Bootstrap CSS code blocks (copy the locked CSS code block to your own style sheet and change the values of whatever attributes you like, very cool!)
My question is, will we ever be able to remove or delete identifier and class selectors and pseudo-classes in overridden CSS code blocks. A scenario where I feel this may appropriate is when you use a particular element that has its associated pseudo-classes, class or identifier selectors that you overwrite to edit the styling, but then want to remove said pseudo-class, class or identifier selectors as you don’t want to use them (maybe a focus, hover or active pseudo-class for example).
Right now removing the overridden CSS code block doesn’t help as Bootstrap’s stylings then take precedence, so your pretty much stuck with having to override the locked CSS code block which doesn’t leave much room for complete customization.
I hope this is something that will be possible, if not, then creating a website the traditional way (without Bootstrap Studio) is pretty much the only option if you want the ability to use Bootstrap and have complete control over the styling of your elements. This would be such a shame as I am really liking the workflow of Bootstrap Studio and the visual editor, its extremely productive and refreshing and makes web development incredibly efficient.
Ok, I just realised there is a custom HTML code component that allows you to write your very own HTML. This pretty much solves the above problem I was describing. I think I should read the documentation before posting. Sorry!
Make sure you realize that if you use custom code, you cannot use the settings and drag and drop capabilities of the app, you will always have to edit it manually.
Other than that, I’m entirely confused at the 2 posts as I cannot find anything that the second one has to do with the first lol. Probably me reading it wrong, but it sounded to me in the first post that you were looking for a way to remove the default CSS classes/id’s that were no longer needed. Not a possibility, but … you can override them (or will be able to when they have the rest of the custom Themes settings done). To do this you create your own bootstrap css file and import it. I’m not sure exactly which file, if it matters or not if it’s the bootstrap.css or the bootstrap.min.css.
You can easily setup your own CSS theme by going to https://bootstrap.build, start a project after you get an account and sign in, then use the default themes they provide as starting points if you find any there that are close to what you’d like to see. You can see those by hitting the Free Themes button. Do that after you have created a project so that it will update. In the Free Themes section find the one you want to start with and click the customize button. That should get you started and you can then change as little or as much as you like.
After you export your theme, you then go into the settings of Bootstrap and hit the Themes button on the left. Import your theme. Now go to the bottom left of that settings window and click the Bootstrap selection. In the Themes dropdown choose your them and click save. Now go make your website!
P.S. I still don’t know what any of that had to do with custom HTML
You’re not locked into the stock bootstrap.min.css file. You can completely create your own version from scratch, omitting or changing whatever you want.
Could you explain how? I’m trying to use mdb bootstrap css file and replace the existing baked in bootstrap.min.css but can’t currently work out how to remove it?
In BSS click on settings, then manage themes (as above)
Click import theme, then import your new theme css (I would suggest renaming it to something like mdb-bootstrap.css
When imported, then click on Bootstrap in the left menu of the settings (with the blue icon in image above), click on the Themes dropdown and select your theme (mdb-bootstrap). This is why I suggest to rename it, otherwise you will have a set of themes called bootstrap
You can customize the stock bootstrap.min.css file by using Sass.
Replacing default Bootstrap with MDB Bootstrap is a totally different animal. It was discussed here on the forums back in 2019 and deemed unfeasible, but this may have since changed based on what one of the forum members recently came up with here.
Thanks Richard - I did manage to find that option and did that which looks like it worked. Just need to go through my other pages / components to remove the base bootstrap otherwise multiplies are added to the header and I think it will all work.
