Writing my project I can not apply bottstrap's paddings and margins for my inner elements, however the syntax and all the nesting rules are followed, as for me. Here is the piece of markdown:
<div class="col-8"> <div class="search-box row justify-content-between align-items-center"> <img src="assets/search-loupe-gray.svg" alt="loupe" class="col-1 loupe" /> <input type="search" placeholder="Placeholder" class="col-9 pe-8"/> <button mat-raised-button class="col col-2" style="height:100%"> <img src="assets/search-loupe-white.svg" alt="loupe" />Find</button> </div> </div>
Bootstrap was installed via npm, and the link was added into index.html
Could not find any proper decisions to this issue. Once at stackoverflow it was reccomended to override bootstrap's styles, but it is not an option
The solution is that the biggest value of spacings is 5. Here is an related article. To tell more, you can add your own values by overriding bootstrap styles in any new .scss file stored inside the project and importing it in main "styles.scss" file