Bootstrap CDN

CDN stands for Content Delivery Network. It is a distributed network of servers used to deliver files to users over the internet.

Websites can use a CDN to load resources such as CSS, JavaScript, fonts, images, and libraries.

Bootstrap CDN allows your HTML page to load Bootstrap resources from an external CDN instead of storing those files locally.

This means you can start using Bootstrap without manually downloading the complete Bootstrap package.

Bootstrap CSS can be added inside the <head> section using a <link> element.

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

After adding this link, Bootstrap CSS classes become available on the page.

Bootstrap's JavaScript bundle can be added before the closing </body> tag.

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>

The JavaScript bundle enables Bootstrap's interactive components.

There are several reasons developers use a CDN when working with Bootstrap.

• No manual Bootstrap download is required.
• Easy to add to an HTML page.
• Useful for learning and small projects.
• Bootstrap files are hosted externally.
• Different Bootstrap versions can be referenced explicitly.

<!DOCTYPE html>
<html>

<head>

    <title>
        Bootstrap CDN
    </title>

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

</head>

<body>

    ...

    <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
    </script>

</body>

</html>

The Bootstrap CSS CDN link is normally placed inside the <head> section.

<head>

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

</head>

This allows Bootstrap styles to be available when the page is rendered.

Bootstrap's JavaScript bundle can be placed near the end of the <body> section.

<body>

    ...

    <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
    </script>

</body>

After loading Bootstrap CSS, you can immediately use Bootstrap classes.

<button class="btn btn-primary">
    Click Me
</button>

The btn and btn-primary classes come from Bootstrap.

The Bootstrap container class can be used after adding the Bootstrap CSS CDN.

<div class="container">

    <h1>
        Bootstrap CDN
    </h1>

</div>

The grid system is also available when Bootstrap CSS is loaded.

<div class="container">

    <div class="row">

        <div class="col-md-6">
            Left
        </div>

        <div class="col-md-6">
            Right
        </div>

    </div>

</div>

One commonly used CDN for Bootstrap is jsDelivr. Bootstrap resources can be referenced using jsDelivr URLs.

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/

The version number in the URL specifies which Bootstrap version is requested.

A Bootstrap CDN URL can contain a version number.

bootstrap@5.3.3

Here, 5.3.3 identifies the Bootstrap version being requested.

Specifying a version makes it clear which Bootstrap release your project is using.

This can help keep the project consistent and avoid unintentionally loading a different release.

The bootstrap.min.css file is a minified version of the Bootstrap CSS.

Minified files remove unnecessary whitespace and formatting to reduce file size.

bootstrap.min.css

The bootstrap.bundle.min.js file is a minified Bootstrap JavaScript bundle.

It is commonly used when adding Bootstrap's JavaScript components to a web page.

The Bootstrap bundle contains Bootstrap's JavaScript along with Popper.

This is convenient for components such as dropdowns, tooltips, and popovers that use Popper functionality.

bootstrap.bundle.min.js

If your page only needs Bootstrap's CSS features, you can include the CSS file without adding Bootstrap's JavaScript.

For example, grid, typography, spacing, colors, and basic button styling do not require Bootstrap JavaScript.

Bootstrap JavaScript is required for interactive components such as:

• Modal
• Dropdown
• Carousel
• Collapse
• Offcanvas
• Tooltip
• Popover
• Toast

When Bootstrap resources are loaded directly from a CDN, the browser needs access to that external resource.

If the CDN resource cannot be reached, Bootstrap may not load correctly on the page.

CDN resources can be used with Subresource Integrity, commonly called SRI. An integrity attribute allows the browser to verify that the downloaded resource matches an expected cryptographic hash.

When copying CDN links from official documentation, use the complete integrity and cross-origin attributes supplied with that resource.

When an SRI-enabled external resource is used, the crossorigin attribute is commonly included as part of the CDN resource tag.

<link
rel="stylesheet"
href="..."
integrity="..."
crossorigin="anonymous">

The exact integrity value depends on the specific resource.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>
        Bootstrap CDN Example
    </title>

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

</head>

<body>

    <div class="container mt-5">

        <h1 class="text-primary">
            Welcome to Bootstrap
        </h1>

        <p class="lead">
            Bootstrap CDN Example
        </p>

        <button class="btn btn-success">
            Start Learning
        </button>

    </div>

    <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
    </script>

</body>

</html>

After adding the CDN links, test Bootstrap by using a few Bootstrap classes.

<h1 class="text-primary">
    Bootstrap Test
</h1>

<button class="btn btn-danger">
    Test Button
</button>

If the elements display with Bootstrap styling, the CSS CDN is working.

A common mistake is copying an incomplete or incorrect CDN URL.

Always check that the CSS or JavaScript URL points to the intended Bootstrap resource and version.

Another mistake is including Bootstrap JavaScript when the project needs a Bootstrap interactive component but forgetting the correct JavaScript bundle.

For Bootstrap 5, the bundle is a convenient option because it includes Popper.

Try to use matching Bootstrap versions for the CSS and JavaScript resources in the same project.

bootstrap@5.3.3
bootstrap@5.3.3

Using the same version helps avoid unexpected compatibility problems.

• Easy to set up.
• No manual Bootstrap download is required.
• Simple HTML integration.
• Specific versions can be referenced.
• Useful for learning Bootstrap.
• Useful for many simple web projects.
• Bootstrap CSS and JavaScript can be loaded separately.

When using Bootstrap through a CDN, choose the Bootstrap version intentionally, use the appropriate CSS and JavaScript resources, and keep the resource versions consistent.

For production websites, also consider the project's requirements, security practices, caching strategy, availability requirements, and whether locally hosted assets or a package-based build process would be more appropriate.