Bootstrap 5 Introduction

What is Bootstrap?

Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap, the most popular front-end framework built to design modern, responsive, and dynamic interfaces for professional design web pages, is currently undertaking a major update, Bootstrap 5. Bootstrap 5 alpha was officially released on June 16, 2020.

What's new in Bootstrap5?

jQuery is removed completely
Vanilla JavaScript instead of jQuery
Responsive Fonts
CSS Custom Properties
Improved Grid System
Improved Documentation
Improved Form Controls
New Bootstrap Icon Library
Drop Internet Explorer 10 and 11 support
Navbar Optimization
Removed Cards

To download Bootstrap5?

If you want to download and host Bootstrap 5 yourself, go to https://getbootstrap.com/

Bootstrap5 CDN

You can include it from a CDN (Content Delivery Network).

CDN Link

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Create Your First Web Page With Bootstrap 5

Basic Bootstrap5 Page

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap JS Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <h1>Welcome to Bootstrap5</h1>
</body>
</html>

Try it Yourself

Add the HTML5 doctype - Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype.