BootstrapHow-ToBeginner · 3 min read

How to Use Bootstrap CDN for Quick Styling

To use Bootstrap CDN, add the Bootstrap CSS and JS links inside your HTML <head> and before the closing </body> tag respectively. This loads Bootstrap styles and scripts directly from the internet without downloading files.

📐

Syntax

Include the Bootstrap CSS link in the <head> section to apply styles. Add the Bootstrap JavaScript bundle before the closing </body> tag to enable interactive components.

CSS link: Loads Bootstrap styles.
JS bundle: Loads Bootstrap scripts and dependencies.

html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ENjdO4Dr2bkBIFxQpeoYz1HIb6fQb1p1rZ9ZZTtmI3zV9zzTtmI3zV9zzTtmI3zV9" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+6p9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"></script>

💻

Example

This example shows a simple web page using Bootstrap CDN to style a button with Bootstrap's primary color and rounded corners.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap CDN Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ENjdO4Dr2bkBIFxQpeoYz1HIb6fQb1p1rZ9ZZTtmI3zV9zzTtmI3zV9zzTtmI3zV9" crossorigin="anonymous">
</head>
<body>
  <div class="container mt-5">
    <button type="button" class="btn btn-primary rounded">Click Me</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+6p9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"></script>
</body>
</html>

Output

A white page with a blue rounded button labeled 'Click Me' centered horizontally with some margin from top.

⚠️

Common Pitfalls

Forgetting to include the CSS link in the <head> causes no Bootstrap styles to apply.
Placing the JavaScript <script> tags before the CSS link or too early in the <head> can cause errors.
Not including the JavaScript bundle means interactive components like modals or dropdowns won't work.
Using outdated CDN links can load old Bootstrap versions with different class names.

html

<!-- Wrong: Missing CSS link -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Missing CSS</title>
</head>
<body>
  <button class="btn btn-primary">Button</button>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

<!-- Right: Include CSS link in head -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Correct Bootstrap</title>
</head>
<body>
  <button class="btn btn-primary">Button</button>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

📊

Quick Reference

Use these Bootstrap CDN links for the latest stable Bootstrap 5.3.0:

html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

Resource	Purpose	Placement
Bootstrap CSS	Styles for layout and components	Inside
Bootstrap JS Bundle	JavaScript for interactive components	Before

✅

Key Takeaways

Add the Bootstrap CSS link inside the to apply styles.

Include the Bootstrap JavaScript bundle before the closing tag for interactive features.

Use the latest CDN links to get the newest Bootstrap version and features.

Missing CSS or JS links causes styling or functionality to break.

Place the links in correct order and locations in your HTML file.