Changing gutter spacing for Bootstrap

Topic: Changing gutter spacing for Bootstrap

famu1hundred asked 3 years ago

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)

enter image description here

Aliaksandr Andrasiuk staff answered 3 years ago


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 3 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 3 years ago


Glad that you could find the solution.

Thanks for the founded problem with our .scss files.

Best regards.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • 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