How to set global CSS for Bootstrap? For example, I would like to change the SASS variable $white=#fff to a light gray value, and the "Dark" value in the CSS. Bootstrap.build changes these things easily to create a custom bootstrap, but I don't see how to do this in BStudio.
https://bootstrapstudio.io/tutorials/writing-sass
This article doesn't seem to explain how to see and edit the standard Bootstrap SASS or SCSS files, just how to create them. Not sure that's what I was asking for.
I don't believe you can edit them, only overwrite them like you would CSS classes/ID's? Not sure here as I don't use it yet, but I'm guessing that's most likely the case that you'll need to just duplicate the the parts in SASS and adjust them that way? Hopefully someone else will chime in here with more info. This is how it's done for CSS to change default Bootstrap since it's locked.
Not sure what you are asking for here!
If you are using SASS, you don't need to use css. The xxx.compiled.css (as explained in the link sent by 'Printninja') is compiled by the sass compiler from the .SCSS file and editing it could cause the compiler to lose sync between the .css and .scss files
Anything you write in your sass file is global, but you can obviously use the partials to keep them local to a particular area
Can you explain a little more what you are after?
P.S. I assume $white=#fff was a typo as it should be $white: #fff;
As I said, the link didn't help me. Does BStudio use SASS to create its CSS output, then build Bootstrap.css from it? Where would I then find the existing SASS file to edit it? I don't want to write my own CSS overwrites because one SASS variable may be used in many CSS expressions. That's one big reason why Bootstrap uses SASS (or is it SCSS?) in the first place.
Yes, that was a typo. I have never used SASS or SCSS myself, so I'm unfamiliar with the syntax.
When I say "global change" I mean a value change that might affect many CSS expressions. When I want to change the background color to gray, it has to affect all the HTML elements that use the standard white background color, and only those elements.
I'm in a 14-day evaluation, and finding so far that the documentation only discusses the BStudio UI for laying out elements, not everything needed to create a production website. I have many remaining questions that fall in that category, changing global CSS values through Bootstrap's SASS code being one of them.
As you can see from this Video. BSS lets you create the .SCSS file and you edit it. Then when you export it, it creates the corresponding .css file.
You just change the one variable in the .scss file and all elements with that color will change
Although you can do the same with a .css file and use css variables
I found this video a bit hard to understand (what is being done and why), since it was silent. But when I create an SCSS file, it is empty. What I want to see in it is the SCSS input to Bootstrap. For example, there should be an entry for each color, such as $white: #fff, so I can change the global colors. Download bootstrap.build and run it, and you will see the actual SASS and the components that go into Bootstrap. In bootstrap.build you can change any of this and rebuild bootstrap to look the way you want it.
If it is impossible to do what I'm asking, can someone just please say so? I really don't know the limitations of BStudio as yet. I'm trying to find out what it doesn't do, and how to work around the limitations.
@David2 what do you mean with "I’m in a 14-day evaluation" ?
and how did you register a forum account if you did not buy bootstrap studio?
When I looked at the BStudio website for the first time, I saw promises, but no details as to how to customize colors or export files and create a real production website. So I asked for a trial version so I could evaluate it. I'm finding the evaluation very difficult, so I'm asking questions here in the forum, hoping to get answers that will make BStudio a viable alternative to simply using Bootstrap (customized using bootstrap.build). I'm a small nonprofit, so I am careful about spending money on software tools until I'm sure I need them. So I need this forum account to help me in my evaluation. Is that all okay with you, or do you have some objection? Can we get back to the topic of how to change global SCSS or SASS variables please?
Please see your other two posts that discuss you needing to learn more about how to make a website. One bout how they are structured as well as another post that gives you full step by step on how to use the Appearance tab (your welcome). Other than that, you really need to take this to some areas on the web to learn how to structure websites. The app doesn't structure them for you other than keeping the main structures intact (hence why it will at times force Rows or Columns) in order to keep the Flexbox settings able to work correctly (which you also need to set up for your site, it's not default).
This app does what it says it will do, helps you create great websites, but you do have to have some knowledge to use it, it's not a full drag and drop app that does it all for you and if that's what you're looking for you should probably look elsewhere. If you have the time to take some tutorials, that would be more worth your efforts than dealing with some of the crappy free site builders out there.
@David2
What you are looking for is under Settings, Design, Bootstrap. There you will find default themes that have been made using sass. You can add to these themes by choosing Settings, Application, Themes and at the lower right choose the Import Theme to the location of your customtheme.css file.
You can easily build now custom themes with one of the many online generators such as https://themestr.app/
You will want to download the .css version as it is the only type that will import as a theme. Once you have imported it, then you can go back to Settings, Design, Bootstrap and choose that theme with your new colors etc. That theme will now be the locked version of Bootstrap.css.
You could also use a compiler such a Prepros to build your own custom version of Bootstrap.css from the sass files you download from Bootstrap website. You could import the compiled version of your theme and then have complete control locally over the theme.
For the more advanced approach after mastering a local build, you can actually import the complete bootstrap structure tree inside of Bootstrap Studio so you use the BS compiler to create the Bootstrap.css. If this method is used, you would create a "blank" theme to use in the Settings, Design, Bootstrap. There are a couple of small hoops to jump through but totally works fine.
Also it should be noted that if you choose a template on startup you will not be able to modify or choose a new theme for that template. Choosing a new theme only works if you have not started with a template supplied by Bootstrap Studio.