How do I customize bootstrap‘s $form-validation-state?
I ve been trying to solve this for hours and I cant find the solution. All I want is to add the property ‚background-color: black‘ to the invalid state.
Here is the doc. Scroll down to sass.
https://getbootstrap.com/docs/5.3/forms/validation/#browser-defaults,
This is the appraoch if you want to change the $theme-color or $spacer, but it doesnt work on $custom-validation-states and the doc doesn't say exactly how to do it.
Validation
Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
11 Replies
if at all possible, post your code in a codeblock (there's instructions in #How To Ask Good Questions )
It's sass code.
use ```css, it's close enough
or unformatted ```
( sidenote: ```scss works too)
It looks like the issue isn't how you're adding it to the map, but that you are adding something that the mixin they are using isn't expecting.
In your invalid state, you can see your black got added in to the map (2nd screenshot), but Sass doesn't know what to do with that.
any idea, how I can add new property? the Doc just says "Override or extend this to generate different or additional states."
There is the $tooltip-bg-color in there tho
what are you trying to add the color to?
I want to change the input field to red when its invalid
But I want only use bootstrap.
I can override the values inside the $form-validation-states, but adding new properties doesnt work
you can't modify their mixin, afaik. It's more about modifying the existing maps to go to different values.
Addtional customization is a bit out of scope for what Bootstrap does... I'd just add a
.form-control:invalid { background-color: xyz; } 🤷
Granted I haven't used Bootstrap in years, but I still use Sass a lot and I can't think of a way to modify a mixinyeah looks like it. I just don't like the idea of mixing bootstrap with custom css. Thank you Kevin for taking your time. I will watch all your youtube ads 😄