I would like to style my input fields with bootstrap-4 altering the default appearance by theming. Yet on one exception of the pages I would like to use the default appearance of the input fields given by bootstrap. The same I want to do with the grid. On every page the gutter should be 50px wide except for one page where it should be only 15px wide.
I have already tried to write two different theming sheets:
themesheet1.scss:
...
$grid-gutter-width: 69px !default;
$input-bg: transparent;
$input-placeholder-color:#ffffff80 !important;
$input-color: white;
...
themesheet2.scss
...
$grid-gutter-width: 15px !default;
...
but since there is a lot of repetitive theming happening below and above those lines of code which is the same in both files I find this solution to be pretty unhandy since there is unnessecary code to maintain. I wonder whether it is possible to somehow freeze the class (I think it is .form-control
) which styles the inputs in its default state (i.e. without the theming applied) under a different class-name e.g .form-control-default
and then theme .form-control
according to my needs. Thus I would be able to access both classes later on. As for the grid I am not really shure of how to accomplish what I want without writing a second theming file, since there are several classes involved.