Make All Custom CSS Go to the Styles.css File

Bootstrap Studio Help
1

I’m new to BSS and I am also not a fan of inline CSS.

Is there a setting in BSS that I can toggle to all CSS to be put in the Styles.css file.

Handing these files off to a developer for data integration and the inline styling makes editing the files extremely difficult.

I’m surprised that BSS does not use the external Styles.css to manage the custom styles.

2
3

According to the docs I have to manually copy each individual inline style to the Styles file?

So there is no setting to automatically force BSS to create and maintain all CSS in the Styles file?

4

Not if you have already got inline styles, the program doesn’t generate custom CSS classes for your inline styles when you move them into your styles.css file.

Usually while building your site and when you require custom CSS you can choose from the appearance tab, at the top, select elements and give elements classes before you then add any custom CSS.

It’s important to note that Bootstrap Studio is not a drag and drop website builder like other traditional applications, but more a visual code editor. So you still follow the rules of building sites as you would in a standard IDE, giving elements custom classes first, then adding your CSS and avoiding inline styles unless they are one off elements.

I hope this helps.

5

Can I go back and add custom classes to the inline ones then move the css to the Styles file?

6

Here’s how to do it:

  1. Select an element with inline styles.
  2. Give the element a custom CSS class, to do this, from the left box, next to the CSS window, under the canvas write your custom class name in the classes input.
  3. Once done, go to the inline styles on the right, click on the three vertical “…” Button, then choose move to Styles.css.
  4. This will create a CSS class from the one you entered, along with putting the inline styles into the styles.css file. You may need to double check that the CSS class applies only to your custom class.
7

Excellent. Thank you very much for the detailed explanation.

8

Once I move custom classes to the Styles file BSS will automatically manage them in the Styles file?

9

So, once you add a custom CSS class to an element, and have given it some CSS - Bootstrap Studio will highlight the CSS class by putting it at the top of the list in the CSS window.

You can additionally open the Styles.css file and make changes here.

If you want to use the Appreciate tab on the right, you first need to select the element, then choose the element from the drop-down at the top of this tab.

If you continue to use the inline styles, they will simply be inline and you will need to repeat adding them to the Styles.css file like in the instructions before.

I hope this helps!

10

Can I ask you for a screenshot of the area you’re talking about?

11

When I click the three dots I get:

Screenshot 2025-06-01 at 2.55.34 PM
Screenshot 2025-06-01 at 2.55.34 PM772×288 16.3 KB

12

Is there a video showing this sequence?

13

I have created a short video discussing working with CSS inside Bootstrap Studio, I hope this is helpful. Please excuse it being a bit quiet. I have a cold. This goes over what is covered in the video tutorials and in the Bootstrap Studio documentation (hint hint!).

I would say another great bit of advice for learning Bootstrap Studio, is to simply try out lots of things, click on everything you can and explore all the options available - there is always an undo button!

2 Likes
14

Thank you so much!!!

Hope you’re feeling better soon.

I wish I would have known this at the beginning of my project.

It’s going to taking some doing to get everything moved over to my Styles file.

I still think this should be more automated from the beginning:

  1. Modify a setting in the Appearance panel
  2. Popup or something prompts me to add a custom class and add it to the Styles file.
  3. From that point on I know that any changes to that element will be in the Styles.css
15

Some advice:

  1. Focus on building your website using the Options panel, not the appearance panel. Any settings applied to components via the options panel add Bootstrap CSS classes to the components, so no inline CSS is ever generated.

  2. Learn and use Bootstrap’s utility classes. For example, instead of positioning via the Appearance panel, use bootstrap’s utility classes entered directly into the Attributes > Class Names field

  3. Get in the habit of hand-writing your own CSS for things you can’t do through the Options panel or via Bootstrap utility classes. I have a set of my own custom classes/rules that I add to the styles.css file on every new website I build. Then, as I’m building I can just add the classes via Attibutes > Class Names.

I almost never use the Appearance panel when building a website.

2 Likes
16

Thank you for the valuable information! Very much appreciated.