We can install Bootstrap5 through the following two ways: * Use Bootstrap5 CDN. * Download Bootstrap 5 from the official website [getbootstrap.com](https://getbootstrap.com/docs/5.1/getting-started/download/). !(#) ### Bootstrap 5 CDN CDNJS： ## Bootstrap5 CDN > **Note:** popper.min.js is used for setting popups, tooltips, and dropdown menus. bootstrap.bundle.js (uncompressed) or bootstrap.bundle.min.js (compressed) includes bundled plugins such as popper.min.js and other dependency scripts, so we can also directly use the following code: ## Example ## Bootstrap5 CDN (jsDelivr) ## Bootstrap5 CDN (Staticfile) In addition, you can also use the following CDN services: * Domestic Recommended 1: [https://cdn.bytedance.com/](https://cdn.bytedance.com/) * Domestic Recommended 2: [https://www.staticfile.net/](https://www.staticfile.net/) * International Recommended: [https://cdnjs.com/](https://cdnjs.com/) ### Download Bootstrap 5 You can go to the official website [https://getbootstrap.com/](https://getbootstrap.com/) to download the Bootstrap5 library. > **Note:** In addition, you can also install it through package management tools such as npm, yarn, gem, composer: > > npm install bootstrapyarn add bootstrapgem install bootstrap -v 5.1.1composer require twbs/bootstrap:5.1.1 * * * ## Create Your First Bootstrap 5 Page ### 1、Add HTML5 doctype Bootstrap requires using the HTML5 document type, so you need to add the HTML5 doctype declaration. The HTML5 doctype is declared in the document head and sets the corresponding encoding: ### Mobile Device Priority In order to make Bootstrap-developed websites mobile-friendly and ensure proper rendering and touch zooming, you need to add the viewport meta tag in the head of the page, as follows: `width=device-width` means the width is the width of the device screen. `initial-scale=1` means the initial zoom ratio. * * * ## Container Class Bootstrap 5 requires a container element to wrap the website content. We can use the following two container classes: * The .container class is used for fixed-width containers that support responsive layouts. * The .container-fluid class is used for 100% width containers that occupy the entire viewport. !(#) * * * ## Two Bootstrap 5 Pages ## Bootstrap5 .container Example [Try it »](#) The following example shows a container that occupies the entire viewport. ## Bootstrap5 .container-fluid Example [Try it »](#)