Topic: Changing gutter spacing for Bootstrap
Using MDBPro for React, we are trying to change the spacing between columns in the bootstrap grid system.
Within the project (index.js) we are using the following line of code to change/edit SASS files:
import 'bootstrap-css-only/css/bootstrap.min.css'; import './assets/scss/mdb.scss';
Any changes we make to
files are being reflected in the app when the app recompiles. However when we make the change to
for the variable to reduce the spacing,
$grid-gutter-width: 16px !default;
the change is not reflected and the gutter spacing remains the same. The mdb.scss file imports the core/bootstrap/*.scss files during recompile but yet the change is not reflected. How can we change the gutter spacing?
We also tried overwriting the $grid-gutter-width in the _custom-variables.scss file but that does not work either. Changing mdb component variables does work (i.e. $navbar-scrolling-padding)
Bootstrap styles are imported from
bootstrap package, not from our
scss files so changing the
_custom-variables.scss will do nothing... We will think about the new approach to this.
For now, there is a workaround : you can add style to the
.container(used by bootstrap) in
_custom-variables.scss and you will get the result you want.
This topic is closed.
- User: Free
- Premium support: No
- Technology: React
- MDB Version: 4.13.0
- Device: Macbook Pro
- Browser: Chrome
- OS: MacOS Mojave
- Provided sample code: No
- Provided link: No