Bootstrap is now the most popular CSS framework, with many web sites and backstage management systems based on Bootstrap design. However, Bootstrap has always maintained that blue + light gray color tone, so is the latest Bootstrap4, look for a long time will inevitably be some aesthetic fatigue. How does

modify the color theme of Bootstrap? This article teaches you how to customize Bootstrap4 to make your page a little more different.


  1. Node.js compiler tools needed for
  2. Bootstrap4, depending on the download Bootstrap package, you need to install the Node.jsBootstrap4 source code on the computer to modify the Boostrap of a source code, visit the official website of Bootstrap (

may not be able to access Bootstrap4 official website in some places, so you can also access Bootstrap, Chinese net, and download to source code.

1. customize color theme

Bootstrap. In order to facilitate customization, we extract some variables and put them in scss/_varaibles.scss files.

opens the file can be found, there are many configurations, find this section:

 $primary: $blue! Default $secondary: default; $success:; $gray-600! $green! Default; $info: default; $warning: $cyan! $yellow! Default; $red default; $light: $danger:! $gray-100! Default; $dark: $gray-800 default; 

! Here is the basic tone of the configuration of Bootstrap, modify the color value, can the other site look different style. In addition to the main color, there are many color related variables that can be controlled, and the edge of the frame that is finer to an input box can also be adjusted. You can try it slowly. For example,

modified _variables.scss:

 $primary: these variables #e95420! Default $secondary: default; $success:; #0e8420! #fff! Default; $light: default; $dark: #e8cd56! #e95420! Default; $input-bg: #c34113; $input-placeholder-color: #ccc; #c34113 & input-border-color:; $input-color: #fff; $jumbotron-bg: RGB (247, 247, 247); 

will be Ubuntu site similar color style:


fine appearance of components in addition to adjust the color, there are a lot of variables _variables.scss, Bootstrap to the appearance of components for fine tuning, such as

$enable-shadows, the control component is around some pop-up Indicates whether or not the shadow

style= "text-align: center

$enable-rounded, control components (buttons, input boxes, drop-down box etc.) around whether to display rounded "text-align: center

$enable-gradients, control components of the background is displayed many weak

of the control variables, not to enumerate.

4. compiled Bootstrap

modified the variable, how to generate their own Bootstrap CSS file? It needs to be compiled with NPM. Before

is compiled, we need to download various dependency packages first, and then get it through install command:

 NPM install

prompt: Node.js default NPM official website download dependency packet, may be slower. Advice from the Taobao NPM image download, fast:

npm install -g cnpm --registry= first

and then use the NPM command in any place, can use cnpm instead of

on downloaded after compiled:

 NPM executive run dist

wait a moment, the compiled CSS file will appear in the dist/css/ directory, can be copied to use in your project! The content of

5. over the Webpack project customized Bootstrap

is to customize Bootstrap4 by compiling the source code. What if you want to customize Bootstrap4 in the Webpack project? It is not appropriate for

to modify the Bootstrap source code in node_modules directly. The official recommended way is to create a custom.scss file in the project, you want to modify the variables written on the inside:

 / / if you want to modify the variables in _variables.scss, please write here at $primary: #e95420! Default $secondary:; default; / / #0e8420!... at the end of the file so please introduce Bootstrap @import code "~bootstrap/scss/bootstrap" 


in Webpack and custom.scss to compile time, also added to the compiled file list. This needs to modify the webpack.config.js configuration in the project.

, then how does webpack.config.js write? The answer to

is in the official document of the Boostrap4, and you can read it yourself. I can also sponsor me 1 yuan by this micro signal, and I will tell you the answer directly. Thank you all for the local tyrants. Your support is the motivation for me to continue to share.

is the whole content of this article, I hope you will help you, and I hope you will support the home of the script.

This paper fixed link: | Script Home | +Copy Link

Article reprint please specify:How does Bootstrap4 customize its own colors and styles | Script Home

You may also be interested in these articles!