What is Bootstrap CDN?
Tags: bootstrap, cdn, tutorial, opensource
Published: 2020-09-19 10:24:16

Bootstrap <abbr title="Content Delivery Network">CDN</abbr> is the distribution of the most popular <abbr title="Cascading Style Sheets">CSS</abbr> framework in the world using a content delivery network. It is a geographically distributed group of servers that work together to provide fast delivery of Internet content.

CDN enables a quick way to serve files over the internet such as HTML, Javascript, CSS, images, and videos. In Bootstrap’s case, the main Bootstrap javascript and stylesheet files are being served over a CDN network.

By default, Bootstrap recommends using Stackpath’s CDN network which already powers over 8 million websites across the globe.

## What are the benefits of using Bootstrap via CDN?

There are quite a few benefits for using Bootstrap via CDN versus directly hosting it on your own server:

1.  _Improves website loading time_ - Because the javascript and stylesheet files from Bootstrap will be loaded from a nearby server based on the geographical location of the website visitor, the loading time will be reduced. Imagine a visitor from Japan: if your Bootstrap files are hosted in the USA, loading time will be much slower than if you had a CDN that would also have servers set up in Asia;
2.  _Reduced bandwidth cost_ - Because the Bootstrap CDN is already used by over 8 million websites, chances are that a significant percentage of your website traffic will have the Bootstrap files cached in the local browser, making your website even faster;
3.  _Improved website security_ - Having content delivered via CDN may protect your website better against DDoS mitigation;

With the benefits being listed, let’s see how you can get started with including Bootstrap into your project via CDN.

## How to use Bootstrap CDN

To get started using Bootstrap via the [official CDN](https://www.bootstrapcdn.com/) powered by StackPath, all you need to do is include the following stylesheet and javascript files. Include the following CSS file into the `<head>` tag of your HTML:

```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
```

Afterward include jQuery, Popper.js, and Bootstrap’s Javascript file before the end of your `<body>` tag:

```
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
```

## How to use Bootstrap 5 via CDN

Although still not the stable version of Bootstrap, you may want to get started using Bootstrap 5 which removed jQuery as a dependency. Add the following stylesheet file in the `<head>` tag of your HTML template:

```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
```

Lastly, add the following two Javascript files before the end of the `<body>` tag:

```
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
```

## Bootstrap themes and templates

You can check out some of our [free and premium Bootstrap themes and templates](https://themesberg.com/templates/bootstrap) from Themesberg and see if it is a good fit for your project. It can save you a lot of time and provide you with professional design and a great working environment.

Each theme uses the recommended Gulp, Bootstrap Sass, and BrowserSync stack environment. Our newest themes that use Bootstrap 5 also no longer require jQuery as a dependency, rendering your website faster and easier to work with.