Bootstrap 4 tutorial

Getting started (2): Customizing CSS / Build / Webpack / Accessibility

Customizing CSS

Bootstrap 4 CSS source files are written in Sass (⇒ Wikipedia). The official document recommends writing an extension Sass code to customize Bootstrap styles. It enables you to modify all-over features of Bootstrap styles but requires skills for Sass, Autoprefixer and so on.

Overriding CSS

Former official documents (until version 3.1.1) recommended appending your CSS code to override Bootstrap styles. It does not require knowledge of Sass and Autoprefixer (much easier). This tutorial employs this method. Overriding CSS is actually used for these two topics.

Breadcrumb - Changing the separator
Forms - Translating or customizing the strings with custom CSS (press to display)

Basically, you can override styles by appending your own CSS code (just) after Bootstrap CSS (Styles are overridden by order).

Customizing from Sass source code

Current official document recommends writing a Sass extension code to customize Bootstrap styles. A typical workflow is as follows.

Make your own Sass file for extension
- Initialize customization variables
- Import Bootstrap Sass code
- (Optional) append your own styles
Compile Sass source code to CSS
Process vendor prefixes with Autoprefixer
(Optional) Minify CSS

However, information about tools (Sass, Autoprefixer, etc.) is very few in the whole official documents. It only explains about Bootstrap source code (for experienced Sass developers). So we have made a separate tutorial for Bootstrap style customization.

⇒ Bootstrap 4 CSS customization tutorial (external site)

This separate tutorial has been made as an npm package (⇒ Download ZIP). You can install required tools and build samples (in fact, site contents themselves) with npm commands.

Building Bootstrap

You do not have to read this section if you just want to use precompiled Bootstrap distribution. But customizing Bootstrap styles needs basic knowlkedge of node.js and npm. Building bootstrap by yourself is a good study to learn npm-based development for beginners.

Bootstrap repositry is published in GitHub. You can get source code of all versions from Releases page. You can also build Bootstrap distribution files (CSS, JavaScript, and documentation) from source code.

This section decribes how to build Bootstrap distribution files from GitHub source code (≥ v4.0.0).

Prerequisites

Building Bootstrap requires node.js and Ruby.

node.js (≥ Version 6.0, uses npm as a main build tool)
Ruby (≥ Version 2.1, needed for jekyll documentation tool)

(Officially undocumented): Some test tools also may need Java (depends on Bootstrap versions). If you see a error message like "cannot find Java", install Java Runtime Envirionment (JRE).

Installation

Before building Bootstrap, you need to install modules on npm and Ruby. ⇒ Instruction

Unzip GitHub source code
- See Bootstrap source code for detail
Move to the folder where package.json and Gemfile exist
Install npm tools ⇒ npm run install
Install Ruby tools (required for documentation) ⇒ (sudo) bundle install
- May need sudo for Unix-based environments
- Requires Bundler gem (bundle command) ⇒ (sudo) gem install bundler if not installed

Commands

Bootstrap 4 uses npm as a build tool. ⇒ Commands

npm run dist - builds CSS and JavaScript (outputs to ./dist)
npm test - builds all and performs tests afterward
npm run docs - generates and lints CSS and JavaScript for documentation
npm run docs-serve - invokes local server for documentation ⇒ http://localhost:9001/
npm run - Show the list of all npm scripts (so many!)

You can also read "scripts": entries of package.json directly to check full commands. It is a better way to study how internal building processes are formed using npm scripts.

Webpack

(May 2018) Webpack is one of the most popular Web development tools. But Webpack itself has been developing very fast. Webpack 4 was released on Feb. 2018. But Bootstrap documentation (still about Webpack 3) has not catch up with Webpack 4.

Then we have made sample start projects for Webpack 4 and Bootstrap 4 as below.

webpack-bootstrap-starter (GitHub)

As Webpack develops too fast, starter examples above will get depretated soon. Please check for yourself to find newest examples.

This tutorial also uses Webpack for a build tool. But it is actually used only for pug compilation and file operations. CSS and JavaScript files are not customized to avoid complexity for beginners.

Accessibility

WAI-ARIA (⇒ Wikipedia) is a web standard specification for accessibility. ⇒ Reference

Actually, two kinds of attributes are used.

Role attributes: e.g. role="navigation"
ARIA attributes: e.g. aria-expanded="false"

This tutorial explains these accessibility attributes on showing component structures.

⇒ Example (Modal) - displays with , expands attributes with

Bootstrap also has Screenreaders utility classes (.sr-only and .sr-only-focusable ). These classes are also explained on showing component structures.