# Bootstrap overriding my custom CSS rules
**URL:** https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751
**Category:** Bootstrap Studio Help
**Created:** [December 24, 2022, 3:10pm UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751 "2022-12-24T15:10:53Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@simonclay](https://forum.bootstrapstudio.io/u/simonclay)
#### Post date: [December 24, 2022, 3:10pm UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751/1 "2022-12-24T15:10:53Z")
I have created a CSS rule: `.search-banner .nav-link` but the font-size is being overridden by Bootstrap rule `.nav-link`.
My custom styles are loaded after the BS framework and also my rule is more specific ‘.search-banner’ so I am wondering why it’s being overridden?
Obviously I can add !important to it, but I am new to Bootstrap Studio and would like to understand why it’s being overridden.
---
### Author:  [@fynn](https://forum.bootstrapstudio.io/u/fynn)
#### Post date: [December 24, 2022, 3:33pm UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751/2 "2022-12-24T15:33:15Z")
Have you added / changed anything under the options tab? Those will use the bootstrap classes, wich will take precedence over custom classes.
---
### Author:  [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)
#### Post date: [December 24, 2022, 4:02pm UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751/3 "2022-12-24T16:02:17Z")
try this
```auto
.search-banner .nav-link {
--bs-nav-link-font-size: 14px;
color: #ffffff;
font-weight: bold;
}
```
---
### Author:  [@twinstream](https://forum.bootstrapstudio.io/u/twinstream)
#### Post date: [December 24, 2022, 4:43pm UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751/4 "2022-12-24T16:43:24Z")
> [@kuligaposten](#):
>
> `--bs-nav-link-font-size:`
I wonder why its not wrote to the variable when first adjusted in the appearance tab and added as inline style. If it was, then you would be able to extract to the variable setting --bs-nav-link-font-size: and not the font-size: Confused 😕?
---
### Author:  [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)
#### Post date: [December 24, 2022, 5:58pm UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751/5 "2022-12-24T17:58:48Z")
@twinstream
if you add a class=“search-banner” on a nav-link
```auto
.search-banner {
--bs-nav-link-font-size: 14px;
color: #ffffff;
font-weight: bold;
}
```
or in the appearance tab you change the font-size,color,font-weight and extract it like this
```auto
.search-banner {
font-size: 14px;
color: #ffffff;
font-weight: bold;
}
```
both classes will override the font-size,color and font-weight in the nav-link class, so you don’t have to change the value of the variable to get it to work
---
### Author:  [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [December 24, 2022, 11:52pm UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751/6 "2022-12-24T23:52:04Z")
@simonclay It’s not being overriden. The problem is you have an error in your CSS. You wrote `font-size: 14;`
Fourteen what?
The 14 needs to have a size declaration after it… example: px, pt, rem, em, and so on. That’s why BSS is turning it red and putting a line through it.
---
### Author:  [@twinstream](https://forum.bootstrapstudio.io/u/twinstream)
#### Post date: [December 25, 2022, 1:51am UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751/7 "2022-12-25T01:51:27Z")
> [@kuligaposten](#):
>
> `--bs-nav-link-font-size: 14px;`
I guess you can do this also…
```auto
.nav-link {
font-size: var(--bs-nav-link-font-size, 50px);
}
```
or make it responsive…
```auto
.nav-link {
font-size: var(--bs-nav-link-font-size, calc(1.2rem + 1.5vw));
}
```
---
### Author:  [@simonclay](https://forum.bootstrapstudio.io/u/simonclay)
#### Post date: [December 26, 2022, 2:22pm UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751/8 "2022-12-26T14:22:14Z")
Thanks all. As @printninja pointed out, I hadn’t specified a unit (px). I’ve made that error a few times.
I’d also like to understand more about how to set all those var–bs-xxx settings for the whole project/theme.
---
### Author:  [@Seb](https://forum.bootstrapstudio.io/u/Seb)
#### Post date: [December 26, 2022, 5:00pm UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751/9 "2022-12-26T17:00:10Z")
> [@simonclay](#):
>
> I’d also like to understand more about how to set all those var–bs-xxx settings for the whole project/theme.
Me too! Would like to have a little tutorial for that 🙂
---
### Author:  [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [December 26, 2022, 11:30pm UTC](https://forum.bootstrapstudio.io/t/bootstrap-overriding-my-custom-css-rules/9751/10 "2022-12-26T23:30:11Z")
I started a topic on this back in November. You might want to bookmark it.
> [@Thoughts on Bootstrap 5.2.0 CSS Variables?](https://forum.bootstrapstudio.io/t/thoughts-on-bootstrap-5-2-0-css-variables/9615):
>
> Just curious as to people’s thoughts on the new (as of BS 5.2) CSS variables in Bootstrap. Have you found them useful? Unnecessary? No opinion either way?