Bootstrap CDN setup
The quickest way to use Bootstrap is to link its CSS and JavaScript files from a CDN in your page.
In this page:
Syntax
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Bootstrap CDN setup
This tutorial uses Bootstrap 5.3.3. The quickest way to start is to link Bootstrap from the jsDelivr CDN, so there is nothing to install. You need two files: the CSS stylesheet goes in the head, and the JavaScript bundle goes just before the closing body tag.
The bundle already includes Popper, which dropdowns, popovers and tooltips need. Also add the viewport meta tag so the page scales correctly on phones.
Note:
Load the JavaScript bundle at the end of the body so it does not block rendering.
Example: Bootstrap CDN setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5.3.3</title>
<!-- Bootstrap CSS (required) -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h1 class="display-6">Bootstrap 5.3.3 is ready!</h1>
<p class="lead">CSS loaded from CDN.</p>
<button class="btn btn-primary">Primary Button</button>
</div>
<!-- Bootstrap JS Bundle with Popper (required for dropdowns, modals, tooltips) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Forgetting the viewport meta tag
- Using the JS file without Popper for dropdowns
- Loading the JS before the HTML it controls
Chapter Summary
- Link bootstrap.min.css in the head
- Load bootstrap.bundle.min.js before </body>
- The bundle includes Popper
- Add the viewport meta tag
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: