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
assets/scss/_custom-*.scsss
files are being reflected in the app when the app recompiles. However when we make the change to
assets/scss/core/bootstrap/_variables.scss
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)
Hi,
Bootstrap styles are imported from bootstrap package, not from our scss files so changing the $grid-gutter-width in _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.
Best regards.
michael.hanna commented 6 years ago
Thanks for the response. We actually ended up just downloading the bootstrap source, unzipping it, copying the source *.scss files into the assets folder, then importing the bootstrap.scss file in index.js instead of the final bootstrap.css file.
This way we can change _variables.scss for the $grid-gutter-width (or any variable for that matter) and the *.scss will be recompiled.
Problem solved...for now!
Aliaksandr Andrasiuk staff commented 6 years ago
Hi,
Glad that you could find the solution.
Thanks for the founded problem with our .scss files.
Best regards.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.13.0
- Device: Macbook Pro
- Browser: Chrome
- OS: MacOS Mojave
- Provided sample code: No
- Provided link: No