Table of contents

• About this tutorial
  • Notation / Source code
• Getting started
  • Startup / Download / Contents / Browsers / JavaScript
  • Customizing CSS / Build / Webpack / Accessibility
• Layout
  • Overview / Grid system / Utilities for layout
• Content
  • Reboot / Typography / Code
  • Images
  • Tables
  • Figures
• Components
  • Alerts / Badges / Breadcrumb
  • Buttons / Button group
  • Cards
  • Carousel / Collapse / Dropdowns
  • Forms
  • Input group / Jumbotron
  • List group
  • Media object / Modal
  • Navs
  • Navbar
  • Pagination / Popovers / Progress
  • Scrollspy / Spinners / Toasts / Tooltips
• Utilities
  • Borders / Clearfix / Close icon
  • Colors / Display property / Embed
  • Flex / Float / Image replacement
  • Position / Screenreaders / Shadows / Sizing / Spacing
  • Text / Vertical align / Visibility
• Extend / Migration / About

About this tutorial

This is a self-study tutorial for Bootstrap version 4. It is basically written in the same order as official Bootstrap 4.2 document. But you can read in any order you like.

Notation

This tutorial uses a special notation for representing HTML structures. For example, consider a button toolbar as below.

<div class="btn-toolbar" role="toolbar" aria-label="Button toolbar">
  <div class="btn-group" role="group" aria-label="Group 1">
    <button class="btn btn-secondary" role="button">1</button>
    <button class="btn btn-secondary" role="button">2</button>
    <button class="btn btn-secondary" role="button">3</button>
  </div>
  <div class="btn-group ml-2" role="group" aria-label="Group 2">
    <button class="btn btn-secondary" role="button">A</button>
    <button class="btn btn-secondary" role="button">B</button>
  </div>
</div>

The tutorial describes it with annotated nested list as follows.

• Pressing Structure button shows whole structure with nested list
  • Pressing Attributes button shows attributes for each element

Structure ⇐ Click!

• Button toolbardiv.btn-toolbar Attributes
  • Accessibility attribute role="toolbar"
  • Accessibility attribute aria-label="Button toolbar"
  • (First) button group div.btn-group Attributes
    • Accessibility attribute role="group"
    • Accessibility attribute aria-label="Group 1"
    • Button button.btn (×3) Attributes
      • Button color .btn-secondary
      • Accessibility attribute role="button"
      • Text 1, 2, 3
  • (Second) button group div.btn-group Attributes
    • Left margin .ml-2
    • Accessibility attribute role="group"
    • Accessibility attribute aria-label="Group 2"
    • Button button.btn (×2) Attributes
      • Button color .btn-secondary
      • Accessibility attribute role="button"
      • Text A, B

Notation rules are as follows.

• Element: black prefix marker (disc), element name with code (red monospace text)
• Element with class(es): CSS dot notation: e.g. div.modal.fade
• Attributes, (additional) classes, and child elements are described with nested lists
  • Additional class(es): white prefix marker (circle), CSS dot notation: .{class1}.{class2}
  • Attribute: white prefix marker (circle), HTML attribute notation: {attribute}="{value}"
  • Text: no prifix marker (none), e.g. Text content
  • Descendant elements use same notation as parents, also use nesting to describe hierarchy

Source code

The master repositry of the site is maintained by GitHub and hosted by GitHub Pages. HTML pages are written in Pug and built with Webpack on node.js/npm. You can build this site by yourself as following instructions.

• Download Zipped source code and extract it
• Install with npm install
• Build with npm run build (site files are generated in ./site/*)
• Start development server with npm run start (⇒ http://localhost:6022/)

See scripts: entries of package.json for more development commands.