Changing gutter spacing for Bootstrap


Topic: Changing gutter spacing for Bootstrap

famu1hundred asked a year 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

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)

enter image description here


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 a year 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 a year ago

Hi,

Glad that you could find the solution.

Thanks for the founded problem with our .scss files.

Best regards.


Status

Closed

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