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.

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.

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

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.

Installation

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

Commands

Bootstrap 4 uses npm as a build tool. ⇒

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.

Accessibility

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

Actually, two kinds of attributes are used.

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.