Topic: How to edit Bootstrap variables and recompile it ?

Nadim Doueiri free asked 3 years ago

Expected behavior

Editing _custom-variables.scss should override Bootstrap's variables (ie: spacers)

Actual behavior

Gulp compiles mdb.(min.)css but bootstrap.min.css is never compiled.

How to edit Bootstrap variables to add spacers, change colors, etc ?

Thank you

Marta Wierzbicka staff answered 3 years ago


As I said before, we don't overwrite core bootstrap variables. I mean, you can create a variable with the same name as bootstrap one, but this won't compile to the new bootstrap.css file.

Best, Marta

Maja Kochanowska free commented 2 years ago

So how can I edit container-max-widths? Should I edit variables.scss or bootstrap.css, because adding it to custom-variables.scss will not work?

Marta Wierzbicka staff commented 2 years ago


for now, in our package, there is no possibility to overwrite bootstrap variables and compile a new bootstrap.css file. We're working on fixing this problem. In your CSS file, you can overwrite this bootstrap CSS code below:

`@media (min-width: 576px) { .container, .container-sm { max-width: 540px; } }

@media (min-width: 768px) { .container, .container-sm, .container-md { max-width: 720px; } }

@media (min-width: 992px) { .container, .container-sm, .container-md, .container-lg { max-width: 960px; } }

@media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; } }`

It's not the best solution and the best coding practice, but if you need new values for containers, you can overwrite these above classes.

Best, Marta

Adam Price free answered 3 years ago

Cant overide bootstrap variables everything is as per the download. I can change mdb variables in my _custom-variables.scss file but boostrap core variables in this file do not change? i have tried importing variables before boostrap core but this still does not work?

/*! * Material Design for Bootstrap 4 * Version: MDB FREE 4.8.7 * * * Copyright: Material Design for Bootstrap * * * Read the license: * * * Documentation: * * Getting started: * * Tutorials: * * Templates: * * Support: * * Contact: * * Attribution: Animate CSS, Twitter Bootstrap, Materialize CSS, Normalize CSS, Waves JS, WOW JS, Toastr, Chart.js * */

@charset "UTF-8";

@import "custom-variables";

// Bootstrap@import "core/bootstrap/functions";@import "core/bootstrap/variables";@import "core/bootstrap/rfs";


@import "core/mixins";

// Your custom variables

@import "core/colors";@import "core/variables";@import "core/global";@import "core/helpers";@import "core/typography";@import "core/masks";@import "core/waves";

// FREE@import "free/animations-basic";@import "free/modules/animations-extended/module";@import "free/buttons";@import "free/cards";@import "free/dropdowns";@import "free/input-group";@import "free/navbars";@import "free/pagination";@import "free/badges";@import "free/modals";@import "free/carousels";@import "free/forms";@import "free/msc";@import "free/footers";@import "free/list-group";@import "free/tables";@import "free/depreciated";@import "free/steppers";@import "free/loader";@import "free/treeview";// Free addons// @import "addons/datatables";// @import "addons/datatables-select";// @import "addons/directives";// @import "addons/hierarchical-display";// @import "addons/flags";// @import "addons/rating";

// Your custom styles@import "custom-styles";

Marta Wierzbicka staff answered 3 years ago


you can edit bootstrap variables but they won't compile to the bootstrap.css file because we don't use a compiler to change the bootstrap.css file, we compile only to mdb.css file.

Best, Marta

Please insert min. 20 characters.


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: General Bootstrap questions
  • MDB Version: -
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No