WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Environment Setup

We can install Bootstrap4 in two ways:

Bootstrap 4 CDN

Recommended library on Staticfile CDN in China:

Bootstrap4 CDN

<!-- New Bootstrap4 core CSS files --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery file. Be sure to include before bootstrap.min.js --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <!-- bootstrap.bundle.min.js Used for popups, prompts, drop-down menus, including popper.min.js --> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <!-- Latest Bootstrap4 core JavaScript files --> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Note: popper.min.js is used to set popups, prompts, and drop-down menus. Currently bootstrap.bundle.min.js already contains popper.min.js .

Also, you can use the following CDN services:

Note: At present, it is recommended to use the staticfile CDN in China.

Download Bootstrap 4

You can go to the official website https://getbootstrap.com/ to download the Bootstrap4 resource library.

Note: You can also install via package management tools npm, gem, composer, etc.:

npm install bootstrap@4.0.0-beta.2
gem 'bootstrap', '~> 4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2

Create your first Bootstrap 4 page

1. Add HTML5 doctype

Bootstrap requires an HTML5 file type, so you need to add an HTML5 doctype declaration.

HTML5 doctype is declared in the header of the document, and the corresponding encoding is set:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> </html>

Create your first Bootstrap 4 page

1. Add HTML5 doctype

Bootstrap requires an HTML5 file type, so you need to add an HTML5 doctype declaration.

HTML5 doctype is declared in the header of the document, and the corresponding encoding is set:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width = device-width means that the width is the width of the device screen.

initial-scale = 1 represents the initial scale.

shrink-to-fit = no Automatically fit the width of the phone screen.


Container class

Bootstrap 4 requires a container element to wrap the content of the website.

We can use the following two container classes:

  • The .container class is used for containers of fixed width and supporting responsive layout.
  • The .container-fluid class is used for containers that are 100% wide and occupy the entire viewport.

Two Bootstrap 4 pages

Bootstrap4 .container example

<div class="container"> <h1>My first Bootstrap page</h1> <p>Here is some text.</p> </div>

The following example shows a container that occupies the entire viewport.

Bootstrap4 .container-fluid example

<div class="container-fluid"> <h1>My first Bootstrap page</h1> <p>A container that uses .container-fluid and is 100% wide, occupying the entire viewport.</p> </div>