1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: How to edit Bootstrap variables and recompile it ?

Nadim Doueiri free asked 4 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 4 years ago

Hi,

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

Hi,

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 4 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 * https://mdbootstrap.com/ * * Read the license: https://mdbootstrap.com/general/license/ * * * Documentation: https://mdbootstrap.com/ * * Getting started: https://mdbootstrap.com/docs/jquery/getting-started/download/ * * Tutorials: https://mdbootstrap.com/education/bootstrap/ * * Templates: https://mdbootstrap.com/templates/ * * Support: https://mdbootstrap.com/support/ * * Contact: contact@mdbootstrap.com * * 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";

// CORE

@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 4 years ago

Hi,

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

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
bootstrap variables sass gulp
About author
Nadim Doueiri
5Support score
1Questions 0Answers 0Snippets