How to edit Bootstrap variables and recompile it ?

Topic: How to edit Bootstrap variables and recompile it ?

Nadim Doueiri asked 6 years ago

0 0

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

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

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

Add comment

Adam Price answered 5 years ago

0 0 Best answer

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";

Add comment

Marta Szymanska staff pro premium answered 5 years ago

0 0 Best answer

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 commented 5 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 Szymanska staff pro premium commented 5 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

Nadim Doueiri

5Support score
1Questions 0Answers

0Snippets likes 0Snippets