1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: $grid-columns

NunogBento pro asked 5 years ago

Hi, I'm trying to change the bootstrap $grid-columns to 16 with no results, what are your recommendations? thank you

Bartłomiej Malanowski staff commented 5 years ago

What have you tried so far?

NunogBento pro commented 5 years ago

Changing the _custom-variables.scss, even the the core/bootstrap/_variables.scss

Bartłomiej Malanowski staff answered 5 years ago

Changing the number of columns in bootstrap isn't a black magic. in mdb.css we don't build columns - they come from bootstrap.css, so if you want to customize your version of Bootstrap, you need to make some changes in Bootstrap's scss code. For the first, you need to get a scss code of Bootstrap. You can find all of the releases here: https://github.com/twbs/bootstrap/tags
  1. Please download the version that you'd like to use (I recommend to use the latest, currently 4.1.3) and unzip the archive
  2. Install dependencies (npm i or yarn)
  3. In scss/_variables.scss change $grid-columns to 16
  4. Run npm run css-compile to compile updated scss code
  5. Run npm run css-minify to minify your customized bootstrap.css file
And voilà! Your copy Bootstrap is now using the 16-columns grid
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: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: All
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No
Tags
grid grid-system bootstrap custom
About author
NunogBento
Pro User 5Support score
1Questions 0Answers 0Snippets