Bootstrap5 Installation and Usage

We can install Bootstrap5 in the following two ways:

  • Use the Bootstrap5 CDN.

  • From the official websitegetbootstrap.comDownload Bootstrap 5.

Bootstrap 5 CDN

CDNJS：

Bootstrap5 CDN

<!--New Bootstrap5 core CSS file--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css"> <!--popper.min.js is used for popovers, tooltips, and dropdown menus--> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.2/umd/popper.min.js"></script> <!--Latest Bootstrap5 core JavaScript file--> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>

Note:popper.min.js is used to set up popovers, 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

<!-- New Bootstrap5 core CSS file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
 
<!-- Latest Bootstrap5 core JavaScript file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

Bootstrap5 CDN（jsDelivr）

<!--New Bootstrap5 core CSS file--> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" crossorigin="anonymous"> <!--Latest Bootstrap5 core JavaScript file--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

Bootstrap5 CDN（Staticfile）

<!-- New Bootstrap5 core CSS file -->
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
 
<!-- Latest Bootstrap5 core JavaScript file -->
<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

In addition, you can also use the following CDN services:

Download Bootstrap 5

You can go to the official websitehttps://getbootstrap.com/to download the Bootstrap5 resource bundle.

Note:In addition, you can also install it via package management tools such as npm, yarn, gem, composer, etc.:

npm install bootstrap
yarn add bootstrap
gem install bootstrap -v 5.1.1
composer require twbs/bootstrap:5.1.1

Create your first Bootstrap 5 page

1. Add the HTML5 doctype

Bootstrap requires the use of an HTML5 doctype, so you need to add the HTML5 doctype declaration.

The HTML5 doctype is declared at the top of the document, along with the corresponding character encoding:

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

Mobile-first

To make websites developed with Bootstrap mobile-friendly, ensure proper rendering and touch zooming, you need to add the viewport meta tag in the head of the webpage, as shown below:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

initial-scale=1Indicates the initial zoom scale.

Container classes

Bootstrap 5 requires a container element to wrap the website's content.

We can use the following two container classes:

  • The .container class is used for a fixed-width container that supports responsive layouts.
  • The .container-fluid class is used for a 100% width container that spans the entire viewport.

Two Bootstrap 5 pages

Bootstrap5 .container example

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

Try it Yourself »

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

Bootstrap5 .container-fluid example

<div class="container-fluid"> <h1>My first Bootstrap page</h1> <p>Used .container-fluid, 100% width, a container that occupies the entire viewport.</p> </div>

Try it yourself »
Other extensions