As in the subject: The automatic function that replaces manually entered CSS classes with those defined in the default BSS set removes my custom entries.
It happens when you don’t have a text color or background color set. First, add a text color, then you can use text-opacity-25. Same goes for background color. You can also do it from the options panel.
I add a background color class
bg-blue
then
bg-opacity-25
As a result, the bg-opacity-25 class disappears
Same for text color and text opacity classes
text-blue and text-opacity-25 don’t work together
text-blue is not a bootstrap class for text color. if you have text-primary it will work the same for the background color bg-primary instead of bg-blue. In the options panel you have all valid color classes
text-blue is not a bootstrap class for text color
Of course it is.
In Bootstrap you can define any classes you want
I see you don’t understand, so I’ll explain.
Previously in BSS you could enter any classes you wanted to use in the Custom Class field.
The new feature of automatically replacing manually entered classes with some classes from the default sets removes my manually entered classes.
I recommend learning Bootstrap and reading the developer documentation, including extending default parameters/classes like colors, breakpoints, transparency, etc.
here text-blue is a custom class
.text-blue {
color: blue;
}
text-opacity-25 will not work because text-blue is not in bootstrap.css
however you can use text-blue opacity-25 and it will work
btw you can find it in the Bootstrap docs if you want to read more about it
Why are you proposing solutions that won’t work?
We have custom color classes and we want to use them in BSS.
Exactly as it worked so far!
BTW:
.opacity-25 is different from .text-opacity-25
It is also different from .bg-opacity
These are completely different CSS mechanics!
The task is simple, we want to use at the same time
.bg-blue AND .bg-opacity-25
or
.text-blue AND .text-opacity-25
Enter this into the Class Names field e.g. for a DIV and check if it works.
Yes, you’re right — opacity-25 affects the entire element, not just the text. My bad!
here’s how you can make your own text-blue and bg-blue utility classes
Define the CSS:
:root {
--bs-blue-rgb: 13, 110, 253;
}
.text-blue {
color: rgba(var(--bs-blue-rgb), var(--text-opacity, 1));
}
.text-blue-25 {
--text-opacity: 0.25;
}
.bg-blue {
background-color: rgba(var(--bs-blue-rgb), var(--bg-opacity, 1));
}
.bg-blue-25 {
--bg-opacity: 0.25;
}
Usage: text colors
<p class="text-blue text-blue-25">
25% opacity blue text!
</p>
Or use inline styles for full flexibility (any value between 0 and 1 will work):
<p class="text-blue" style="--text-opacity: 0.42;">
42% opacity blue text!
</p>
Usage: background colors
<div class="bg-blue bg-blue-25 p-3 text-white">
Background is blue at 25% opacity!
</div>
Or, inline style for any custom value:
<div class="bg-blue p-3 text-white" style="--bg-opacity: 0.5;">
Background is 50% opacity blue!
</div>
Yes, I know we can add our own additional classes, we know how to do that.
That’s not the point.
We have existing BSS projects where we combine custom colors with transparency. We want them to continue working without removing our classes.
We want to continue the workflow that was possible previously.
The problem has been reported as a bug. We are waiting for the problem to be solved in the next BSS release.
Hello @michalbialkowski,
This issue caught my eye and I just had to see if I could try replicating this.
I created a new project with the custom classes text-blue and text-opacity-25, I then added a card element, and applied these classes, just like you found the .text-opacity-25 vanishes as soon as you finish typing it.
This does indeed appear to be a possible issue with the automatic class assigning feature, I shall tag @martin to notify him, especially as this seems fairly major.
What is so strange about this is that it lets you have a custom class called text-blue or text-opacity or text-opacity-26, but not 25, probably something to do with 25 being one of the default values for Bootstrap CSS, like opacity-25.
I certainly understand your frustration.
I am sure you are aware of the work arounds - and obviously, yes you want to use the format you already obviously have, but I will just add that you could rename text-opacity-25 to txt-opacity-25, that seems to stop the program stripping it out. Also, for this particular use case you could apply the Bootstrap class opacity-25 to just the card body element. As a work around, till this is fixed, if time is of the essence.
Either way, that is a particularly bazar find and hopefully a fix will be out soon 
Thanks,
If I manually enter the .bg-primary and .bg-opacity-XX classes it works fine.
BSS replaces these two manually entered classes with classes from the default set and correctly sets the appropriate dropdowns in the Options panel.
This is OK, but…
If I use a custom color class (.bg-blue / red / whatever) with the .bg-opacity-XX class, BSS gets confused because there is no bg-blue class in the default color values.
Also, look at how the background and opacity dropdowns work. They are conditionally dependent - if you select a background color from the set, only then will you be able to set the opacity.
I think this is the source of the problem.
The solution you propose - using the .txt-opacity-25 class instead of .text-opacity-25 - will not work in our case.
We want to edit our older projects where we use bg-{ourcustomcolor} and text-{ourcustomcolor} classes and transparency classes.
These projects are implemented for our clients and often require changes. I can’t imagine working with an editor that removes classes assigned to project elements.
At the moment we can’t edit them because we are afraid that BSS will remove our custom classes without notice and destroy the UX of our clients’ websites.
1 Like
Thanks for providing that extra information, I’m sure that will also be useful for the developers when they pick this up!
I did suspect this, you seem very well organised and of good technical knowledge so I expected your setup was specific like you say. It could still be useful for someone else who encounters this issue.
The problem with class removal may affect other class combination than bg-color, text-color and bg/text-opacity. The entire BSS would need to be checked…
1 Like
Also, for this particular use case you could apply the Bootstrap class
opacity-25to just the card body element.
This definitely won’t work
Opacity-XX makes the entire element transparent, while bg-opacity-XX only applies to the background color (RGBA background)
Maybe a workaround that’s working for you—just open the Find and Replace dialog, replace bg-blue with bg-blue bg-opacity-25, and it should stick in the Class Names field.
The fix is ​​that we are stopping work on BSS projects where we used custom color labels.
Waiting for an update.
We have tested and confirmed the bug. It will be fixed in our next update later this month. Unfortunately there is no easy workaround until then, apart from using a custom class for opacity.
1 Like