Easy Tutorial
Bootstrap5 Utilities Bootstrap5 Modal Bootstrap5 Container Bootstrap5 Navs Bootstrap5 List Groups Bootstrap5 Form Range Bootstrap5 Form Select Bootstrap5 Buttons Bootstrap5 Pagination Bootstrap5 Cards Bootstrap5 Dropdowns Bootstrap5 Tables Bootstrap5 Badges Bootstrap5 Offcanvas Bootstrap5 Popover Bootstrap5 Collapse Bootstrap5 Spinners Bootstrap5 Alerts Bootstrap5 Progressbars Bootstrap5 Form Validation Bootstrap5 Flex Bootstrap5 Colors Bootstrap5 Typography Bootstrap5 Install Bootstrap5 Form Check Radio Bootstrap5 Button Groups Bootstrap5 Form Input Group Bootstrap5 Tutorial Bootstrap5 Tooltip Bootstrap5 Carousel Bootstrap5 Forms Bootstrap5 Jumbotron Bootstrap5 Navbar Bootstrap5 Form Floating Labels Bootstrap5 Grid Basic Bootstrap5 Images Bootstrap5 Scrollspy
❮ Bootstrap5 Typography Bootstrap5 Form Check Radio ❯

Bootstrap5 Installation and Usage

We can install Bootstrap5 through the following two methods:

Bootstrap 5 CDN

It is recommended to use the library on Staticfile CDN for domestic use:

Bootstrap5 CDN

<!-- New Bootstrap5 Core CSS File -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

<!-- popper.min.js for pop-ups, tooltips, and dropdown menus -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>

<!-- Latest Bootstrap5 Core JavaScript File -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

Note: popper.min.js is used for setting up pop-ups, 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 use the following code directly:

Bootstrap5 CDN

<!-- New Bootstrap5 Core CSS File -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

<!-- Latest Bootstrap5 Core JavaScript File -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

Additionally, you can use the following CDN services:

Download Bootstrap 5

You can download the Bootstrap5 repository from the official website https://getbootstrap.com/.

Note: Additionally, you can install it via package management tools like 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

Creating Your First Bootstrap 5 Page

1. Add HTML5 doctype

Bootstrap requires the use of the HTML5 file type, so the HTML5 doctype declaration is needed.

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

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

Mobile Device First

To make Bootstrap-developed websites friendly for mobile devices, ensure proper rendering and touch zooming by adding 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-width indicates that the width is the device screen width.

initial-scale=1 indicates the initial zoom level.

Container Classes

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

We can use the following two container classes:

Two Bootstrap 5 Pages

Bootstrap5 .container Example

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

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>Using .container-fluid, a 100% width container that spans the entire viewport.</p> 
</div>
❮ Bootstrap5 Typography Bootstrap5 Form Check Radio ❯