How to overwrite the styling of bootstrap?

I am practising bootstrap and I want to change the style of the button with a custom code because I don’t want to use the few ones which this library gives. However, I can’t able to modify things like input border, why ıs this? how can I do? In html I linked the css after boostrap but didnt work either.

Hi,

I have struggled with that.
Often, the only thing I can think of is using !important, that does work but people advise against it because that style can never be overwritten again in the future.
Inline styles help, they override the style sheet.
You can also be as specific as possible, using id’s, classes, pseudo-classes and the full path to a nested element, that helps often.

Good luck,
Karin

2 Likes

Could you show us the code where you actually try to overwrite the bootstrap? It’ll be easier to find a good solution :slight_smile:

In the meantime, here is a simple codepen where I overwrite bootstrap form-control class to style an input element, maybe it’ll help you :wink:

Hello, thank you for the reply, I don’t know how to modify the border of the inputs both in normal and focus. I actally didn’t want to use !important.

https://codepen.io/fadime94/project/editor/AeEzKm#0

Hi,

I just looked at your codepen. From where I am sitting it all does work. Your borders have a width and radius of 2px.
I don’t see a class or id on the inputs. I would start there. You can dynamically id’s with a function maybe and see where you go from there.

Greets,
Karin