Procedure for customising Bootstrap 5

Question

There seems to be very little information on this (in contrast to, say, Bootstrap 3, which was trivially customised).

I don't use Node, so I downloaded dart-sass (the CLI package is just a couple of files - very neat), and managed to compile the 5.2 distro with a very limited amount of Googling. However, the preprocessor output css file isn't quite right - it's very close, but has a number of differences from the dist/css/bootstap.css download.

The differences will presumably go away if I also run autoprefixer. I'm guessing that this has to be run after dart-sass. There's a CLI version (postcss-cli), but this is a Node app.

So, if I have to install (and learn) Node anyway, is the "best" answer just to duplicate the Bootstrap build process? This would also avoid any complications with the .browserslistrc file, which doesn't seem to be explained on the Bootstrap website.

Answer 1

If you just want to generate customised css files, then there's no need to duplicate the entire build process. There's very little documentation on this, but the procedure below does create a new css file which is identical to the version in the Bootstrap distribution (for v5.3.2, at least).

autoprefixer is a Node.js app, so there's no way around installing Node. Given that, there's no point using the standalone dart-sass, and you might as well just use the Node version.

Bootstrap requires at least Node.js 14 (I think), so you first have to get that. Your distro is not likely to be up-to-date (apt on Ubuntu 22.04 installs Node 12). Another complication is that you need npm, which must be compatible with your Node version. I would uninstall anything that came with your distro, and start again by installing nvm. Once you've got it, install a recent Node version (20) with

$ nvm install lts/iron

Create a source tree per the Bootstrap docs (the version without a package manager). Download the current (5.3.2) zip file, and unzip to the bootstrap location. This is preferable to the npm install (npm install [email protected]) because it gives you a .browserslistrc file.

Install the tools:

$ cd your-project
$ npm install postcss postcss-cli autoprefixer
$ npm install sass

The node executables are in the new node_modules/.bin directory, so this must be added to your PATH.

In your build directory (your-project/scss), you need:

1. The .browserslistrc file from the Bootstrap distro

2. Another file named postcss.config.js, which contains:

   module.exports = { plugins: [ require('autoprefixer')({ cascade: false }) ]}

3. A custom.scss file: start with the example full build one, so that you can check your build

Now you're good to go:

$ cd scss
$ sass custom.scss custom.css
$ postcss custom.css -d build/

The new custom.css is built in the new build directory. Compare this to the distribution version in the Bootstrap download (bootstrap-5.3.2/dist/css/bootstrap.css); the 2 files should be identical, apart from a single difference in a filename.

Note that the two files aren't quite identical on other versions (5.2.3, possibly); I'm not sure why.