Menu
On http://getbootstrap.com/customize/ it is possible to create and download a custom Bootstrap configuration. Included in the download is a file called config.json
Is it possible to use that file somehow to refill the values and tweak your custom bootstrap configuration?
If not, does someone know why that file is included?
273
Let’s begin. Create a new file in your Bootstrap CSS folder and call it custom.css. Now in the <head> portion of your website, load your new custom CSS file after the default bootstrap stylesheet. It should look like this. To modify or apply additional styling to your web page, simply add the proper code to your custom.css file.
How to Override Bootstrap CSS You can override the default styles of Bootstrap elements using two possible methods. The first way — using CSS overrides— applies to sites using BootstrapCDN or the pre-compiled versions of Bootstrap. The second — using Sass variables — applies to sites using the source code version of Bootstrap.
We call this a rollup file, because it's going to referencing a ton of other files into it. Inside the base/ folder, you'll want to create a bootstrap_variables file, which you need to pull from the source code. This is where we'll do all of our customizations to bootsrap. After that, in the main.scss file, add the imports from node_modules
Once the SASS is compiled to CSS (this is done using a server-side SASS compiler/processor), the resulting CSS is the customized Bootstrap. In summary, here’s how the SASS customizations work: First, when the custom.scss file is processed using SASS, the !default values defined in the Bootstrap variables.scss.
It's possible to reload and edit your configuration:
Voila! Configuration is reloaded.
189
As of Bootstrap v3.2.1, you'll be able to load your existing config.json settings into the Bootstrap Customizer using drag-and-drop or a filepicker.
32
Scroll down to the end of the config.json file, the latest entry is "customizeUrl" along with the customization url on bootsrtap website. Eg:
"collapse.js",
"scrollspy.js",
"transition.js"
],
"customizerUrl": "http://getbootstrap.com/customize/?id=eaaea96b66287112b6c7"
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
