We can install Bootstrap 4 in the following two ways: * Using the Bootstrap 4 CDN. * Downloading Bootstrap 4 from the official website [getbootstrap.com](https://getbootstrap.com/docs/4.1/getting-started/download/). !(#) ### Bootstrap 4 CDN For domestic use, the ByteDance Static Resource Public Library is recommended: ## Bootstrap4 CDN For domestic use, the library on Staticfile CDN is recommended: ## Bootstrap4 CDN > **Note:** `popper.min.js` is used for setting popups, tooltips, and dropdown menus. Currently, `bootstrap.bundle.min.js` already includes [popper.min.js](https://github.com/FezVrasta/popper.js). Additionally, you can use the following CDN services: * Recommended for domestic use 1: [https://cdn.bytedance.com/](https://cdn.bytedance.com/) * Recommended for domestic use 2: [https://www.staticfile.net/](https://www.staticfile.net/) * Recommended for international use: [https://cdnjs.com/](https://cdnjs.com/) ### Download Bootstrap 4 You can go to the official website [https://getbootstrap.com/](https://getbootstrap.com/) to download the Bootstrap 4 resource library. > **Note:** Additionally, you can install it via package management tools like 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 * * * ## Creating Your First Bootstrap 4 Page ### 1. Add the HTML5 Doctype Bootstrap requires the use of HTML5 document type, so you need to add the HTML5 doctype declaration. The HTML5 doctype is declared at the beginning of the document, along with the corresponding encoding: ### Mobile First To make websites developed with Bootstrap mobile-friendly and ensure proper rendering and touch zooming, you need to add the viewport meta tag in the head of the webpage, as shown below: `width=device-width` sets the width to the width of the device screen. `initial-scale=1` sets the initial zoom level when the page is first loaded. `shrink-to-fit=no` prevents the browser from automatically fitting the content to the screen width. * * * ## Container Classes Bootstrap 4 requires a container element to wrap the site's content. We can use the following two container classes: * The `.container` class provides a fixed-width container that supports responsive layouts. * The `.container-fluid` class provides a full-width container, spanning the entire width of the viewport. !(#) * * * ## Two Bootstrap 4 Pages ## Bootstrap4 .container Example [Try it »](#) The following example demonstrates a container that spans the entire viewport. ## Bootstrap4 .container-fluid Example [Try it »](#)