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.

Add the meta tag - Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your head tag

Output: