Bootstrap 4 tutorial

Getting started (1): Startup / Download / Contents / Browsers / JavaScript

English (英語)Japanese (日本語)

Startup with CDN

The easiest way to start up with Bootstrap 4 is using CDN. This tutorial is also made throughout with CDN.

The structure of the starter template is shown as follows. ⇒

DOCTYPE declaration

HTML documents must start with <!DOCTYPE html>. It is required for backward compatibility to indicate it is a HTML 5.X document. ⇒

Language code

Set the main language of the page with the attribute lang="{language code}" to the root element html. Use one of two-letter codes in ISO 639-1 (i.e. lang="en" for English). ⇒

Character encoding

UTF-8 must be used for the character encoding. ⇒

Setting viewport

Viewport setting are required for mobile devices. ⇒

Loading from CDN

Set attributes integrity="sha384-{SHA-384 string}" and crossorigin="anonymous" to loader tags (link for CSS, script for JavaScript) on using CDN. ⇒

Loading Bootstrap CSS

Load the CSS file from BootstrapCDN. See starter template for actual attributes. ⇒

Loading JavaScript

Bootstrap is mostly a CSS library. But some dynamic features are implemented with JavaScript. It depends on jQuery and is (historically) called "(Bootstrap) JavaScript plugin" as it is written as a jQuery plugin. Bootstrap (≥v4.0) also depends on Popper.js.

Both of them must be loaded before Bootstrap JavaScript plugin. Usually, JavaScript libraries are loaded in the following order. But you can exchange 1 and 2 as jQuery and Popper.js are independent. See starter template for actual attributes.

  1. jQuery - 1.9.1 or above (see package.json), Slim build (without AJAX, Effects) can be used
  2. Popper.js
  3. Bootstrap JavaScript

Download

You can get and use Bootstrap in various ways.

Contents

Precompiled bootstrap

(.map files are omitted)

Bootstrap source code

(Partial items only)

Browsers and devices

Bootstrap 4 supports major browsers and platforms. Supported browsers are described in .browserslistrc (package.json until v4.1.2) by browserslist format (see Best Practices and Full List for the query syntax). ⇒ 

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

It is referenced by Autoprefixer to process CSS with adding vendor prefixes. Autoprefixer is a required tool for customizing Bootstrap CSS (≥ ver. 3.2, see Customizing CSS for detail).

See the official pages for actual supports as below links.

JavaScript

Bootstrap has JavaScript API for implementing dynamic behaiviors. They are is called "(Bootstrap) JavasScript plugins" as they are made as jQuery plugins. See Loading JavaScript for the basic startup settings.

Their original (unbundled) source files are written as ES2015(ES6) modules. You can also make use of JavaScript API's as modules. See Bootstrap source code (press About JavaScript modules button to show detail).

Bootstrap JavaScript plugins implicitly perform initialization processes on startup on load as default (usually you do not have to write any code). However, following components need explicit initializations (see code examples at target links).

Data attributes

Bootstrap JavaScript plugins use custom data attributes (data-*) for setting options. You can write HTML attributes which begin with data- (e.g. data-collapse) to set various API options without any additional JavaScript code.

Programmatic API

Bootstrap JavaScript API is made as a collection of jQuery plugins. You first select elements with jQuery, and invoke methods from elements. The code below is example invocations of Modals. See available options for Options, also see methods (command strings) for Methods. 

// Example 1: Creates an interface object with defaults (normally not required)
$('#my-modal').modal();
 
// Example 2: Sets an option (same as setting an attribute as data-keyboard="false")
// (see "Options" of the official document)
$('#my-modal').modal({ keyboard: false });
 
// Example 3: Executes a command
// (see "Methods" of the official document)
$('#my-modal').modal('show');

Events

Bootstrap JavaScript plugins provide custom events for their specific actions. Event names are provided with the jQuery event namespace (dot-separated). See the naming convention as follows.

The code below is an example of setting an event handler to a Modal component. See Events for the whole listing of available events. 

// Event "show.bs.modal" fires when the method $().modal('show') is invoked.
$('#my-modal').on('show.bs.modal', function(event) {
  // The modal is going to show but is not shown yet.
  // You can use here to change modal contents to display.
});

Also see the live demo example of Varying modal content (working JavaScript code and detailed comments are available).

As jQuery plugins

No conflict

Bootstrap JavaScript plugins are registered to $.fn (jQuery prototype object). All Bootstrap plugins are ($.fn.)alert, button, carousel, collapse, dropdown, modal, popover, scrollspy, tab, toast, and tooltip. As they they are registered as plain lowercase names, they may conflict to other jQuery plugins. You can use .noConflict() to resolve conflicts.

// Restores (the original) $.fn.button and gets Bootstrap button plugin object.
var bootstrapButton = $.fn.button.noConflict();
// Re-registor as a safe different name (bootstrapBtn)
$.fn.bootstrapBtn = bootstrapButton;
// You can call button API as $(SELECTOR).bootstrapBtn(ARGUMENTS)
Default settings

Default settings of each plugins are set to $.fn.{module-name}.Constructor.Default objects. You can change API defaults as follows.

// Example: Changes the default setting of keyboard operation to OFF.
$.fn.modal.Constructor.Default.keyboard = false;