Getting started with Bootstrap question about overriding styles

Question

How exactly is one to know what all needs to be overridden with the bootstrap styles when customizing the look and feel?

Is there a trick to find out where exactly I need to set the style in order for it to take precedence over the bootstrap style?

For example, I've been battling two days making form fields look the way the customer wants them. The default of bootstrap when wrapped up in the form-group row and form-control nested layers comes in with a tall field with rounded edges. I've created my own class setting everything to 0 for the padding and margin. I have also set the height to just 18px. NOTHING gets picked up.

I had the look and feel almost perfect earlier but I was not using any bootstrap stuff just html and css. The lead developer said we need to use bootstrap styles and just tweak what needs tweaked to fit the look and feel. Well, that sure as heck is easier said than done.

---

I miss the days when a designer specified what the look and feel was and we just coded the style and were done with it. This library usage of the 80% solution and 100% effort on top of the 80% does not seem to be a great approach unless it's for maximizing what the client is shelling out.

Answer 1

It appears to me that the underlying issues (or you can say something I did not know) are that the defaults for Bootstrap have padding, margins and other settings greater than 0. So, any tag that I use of bootstrap I'll need to override to set the values to 0 in order to get things to layout as the client wants.

By overriding, I do not mean altering the Bootstrap actual css file but rather in your own css file specify the bootstrap style that you are overriding.

Thanks all for your links and suggestions. Greatly appreciate it.

Helpful tips on using debugging tool: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS

Answer 2

Don't edit the actual bootstrap file, if you are manually importing it to your project.

Just make your own stylesheet, and make sure to import it after the bootstrap import.

Answer 3

Override the styles using your own file.

Don't update the Bootstrap SCSS files to fit your needs. This can lead to many unforeseen issues. Say you want to share or update to a new bootstrap version. Combining the files and/or rewriting your work will be a hassle.

'If you make changes directly to the default bootstrap.css stylesheet, it would become very difficult to maintain and keep track of changes.'

How to Customize Bootstrap – UX Planet

Answer 4

There are 2 ways to do it.

1) Edit Bootstrap SCSS to fit your needs. This way you can customize it quickly and by generating custom CSS, not just overriding it. This is probably the easiest way to do it.

2) Override CSS with custom style. This is easy if you know Bootstrap and what style each element have. Just open Boostrap CSS find what you need and override it. It may be tricky because sometimes Bootstrap uses !important. One last thing - place your CSS after Bootstrap!