How to Include Bootstrap from CDN

Bootstrap is the world's most popular framework for building responsive, mobile-first websites. You can include Bootstrap in your web pages from a Content Delivery Network (CDN).

images/coding/coding01.webp

CSS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">

JS

Many of Bootstrap components require JavaScript to function. Include this right before the closing </body> tag.

Popper is used for tooltips and popovers.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"></script>

Components Using JavaScript

  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel
  • Collapse
  • Dropdowns (also requires Popper)
  • Modals
  • Navbar to implement responsive behavior
  • Off Canvas
  • Toasts
  • Tooltips and popovers (also requires Popper)
  • Scroll Spy

Mobile Friendly Websites

You need to add the viewport meta tag in the <head> element, to ensure proper rendering and touch zooming on mobile devices.

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

HTML5 doctype

Bootstrap requires HTML5 doctype.

<!doctype html>
<html lang="en">
  ...
</html>