How to remove bootstrap row/col margins in react app

Question

I have a react app with bootstrap installed via "npm I bootstrap" (^5.2.2 in package.json), I would like to know if there are a way to remove default gutter in "row" and "col" bootstrap classes, without having to add another class to each tag.

I imported bootstrap to my index.tsx file like this: "import 'bootstrap/dist/css/bootstrap.css';"

Answer 1

You have to override the property. The rules for CSS rule cascading are complex:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used.