What is Bootstrap CDN?
Zoltán Szőgyényi
Posted on September 19, 2020
Bootstrap CDN is the distribution of the most popular CSS 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:
- 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;
- 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;
- 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 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 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.
Posted on September 19, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related