Overriding bootstrap CSS - Mendix Forum

Overriding bootstrap CSS

1

Is there a way to override the default bootstrap styling of certain elements without changing the bootstrap.css?  For example, if I prefer not to have a gray background to my reference selector and want a plain white, how do I do this?  

I'm not familiar enough with the css selector helper widget or know how to properly use it if that is an option.

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1;

 

asked
4 answers
3

Just like Gerrit said! See for example: https://docs.mendix.com/howto/ux/setup-mendix-ui-framework-with-koala
or
https://docs.mendix.com/howto/ux/setup-mendix-ui-framework-with-scout

With this you could add a class that you can set on the specific reference selector to set for example the background color

answered
3

You should never change tge css files. Because they will be created baaed on sass files. There is a learning path in the academy to explain how to modify the styling.

answered
2

Hi,

 

Your CSS selector needs to match or outweigh the Mendix version. You can do that by inspecting the element you wish to overrule. If you want all input elements to have the same look and feel, you probably don't want to put a class on everyone of them. So creating a class in your custom sass file that has the same css selector as the original one should do it. Please note that some browsers will take you to the exact point where a css class is defined, so you don't have to wade through the .css file itself. For example, Chrome can take you from the inspected element or computed value straight to the sass file that defines it.

This might help too: https://www.w3schools.com/css/css_specificity.asp

 

Marcel

answered
1

Hi Andrew, yes you can surely do this.

Go to your project directory, if you are using windows your project will be located in Documents/Mendix folder by default.

go to ->

C:\Users\user-name\Documents\Mendix\your-project\theme\styles\css\custom\custom.css

In custom.css you can override the default bootstrap and even the default mendix-ui css. Simply copy the same css selectors and add/modify the styles as you want.

custom.css loads after all the css files therefore it overrides them.

Hope it helps

answered