Bootstrap 4 CSS customization

English(en) | 日本語(ja)

⇒ GO TO SITE

Table of contents

• About this tutorial
• Learning Sass
• How to customize
• Importing Sass partials
• Manupulating variables
• Using Sass mixins
• Gradient and shadow effects

About this tutorial

This short turorial explains how to customize Bootstrap 4 styles. Bootstrap CSS is written in Sass. You can customize styles by extending Bootstrap source code. Usually you do not have to modify original code.

The tutorial is written in pug and built with npm on node.js. The source code is maintained by GitHub. The site is hosted by GitHub Pages.

Learning Sass

Sass is required to customize Bootstrap. But Bootstrap source code is also good material to study Sass. You can read Bootstrap code and study Sass with referencing Sass documents.

Sass was originally coded in Ruby and several implementations have been created for other languages (see Wikipedia). Three official implementations exist (Ruby, C++, and Dart).

The following are selected documents for studying Sass. It is imcomplete but propably enough for you.

• Sass reference (for Ruby Sass)
  • Sass builtin functions
  • No command line reference (see sass --help)
• libsass (C++ implementation)
  • node-sass (node.js interface, used in this tutorial)
    • node-sass CLI
• Wikipedia: Sass (Stylesheet language)