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.
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:
- 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
<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">
<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/[email protected]/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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.