How to override Bootstrap system styles?

Question

css

Need help. Let's take a special case. Bootstrap v4.0.0-beta .
I connected it means navbar:

<div class="container">
   <nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">...</a>
   </nav>
</div>

In default styles, the .navbar class has indents padding: .5rem 1rem;that are in _navbar.scss:18.
Actually the question is: how can I add / change / remove these indents without using the !important rule in the style.css I created? It’s possible to explain as for a teapot, since I’m absolutely not strong in Saas and similar things)
PS Do not download the CSS sources and make edits in them, somehow this is not comme il faut at all ...

Answer 1

Do not touch bootstrap files.
Override with one of 2 methods:
1) Connect your css below the bootstrap, write in it for example

.navbar{
  padding: 2rem 0.5rem;
}

This will override the indentation of the entire bootstrap
2) Add your class at the end:
Then you do the same, add to your css below the bootstrap:

.myclass{
  padding: 2rem 0.5rem;
}

This will override native bootstrap styles in only one place.

Answer 2

well, as it were, no one forbade adding the px-0 class to the element, in fact
, this way it will give zero padding by x in quite a standard way.
but if you change it globally, then for example I have a bs4custom.css file, where the default styles that are in BS4 are overridden, and a custom.css file for my other styles

Answer 3

You can write your own CSS rule on the page where this navigation appears. I think to redefine properties.

Answer 4

Ay, there will be no witchcraft, you don’t have an Orthodox bootstrap, but a Shaitan 4th one. It will not be possible to collect it from what was on the site.
Climb into the sass file and substitute your value, sass differs only in that there are no parentheses and semicolons.
It turns out that just download the source code only not css, but what do they have scss? %)

Answer 5

To not use !important, the overriding rule must be declared after the rule being overridden, or must have a higher precedence. About Google post priorities, a simple example:
#caption {...}
.caption {...}
For an element, the first rule will override the second, since it has a higher priority.