2a. Load Bootstrap via CDN
As already explained, Bootstrap consists mainly of style sheets and scripts. As such, they can be loaded in the header and footer of your web page like other assets such as custom fonts. The framework offers a CDN (content delivery network) access path for that. You can find it on the Bootstrap download page when you scroll down.
To get Bootstrap into your page, simply paste the code below into the <head> section of your template.
Be sure to take the actual link from the download page in order to make sure you are using the latest version of Bootstrap.
When you now save the file, any browser that opens it will automatically load the Bootstrap assets.
Using the remote method is a good idea as many users will already have the the file in the cache of their browser from loading other Bootstrap-based websites. If that is the case, they won’t have to reload it when coming to your site, leading to faster page loading time. As a consequence, this is the recommended method for live sites.
However, for experimenting and development, or if you want to be independent of an Internet connection, you can also get your own copy of the files. This is what we’re doing for this Bootstrap tutorial because it also results in less code we need to post.
2b. Host Bootstrap Locally
An alternative way to set up Bootstrap is to download it to your hard drive and use the files locally. You find download options in the same place as the links to the remote version. Be sure to get the compiled CSS and JS files. You don’t need the source files.
Once you have finished downloading it, unzip the file and copy its contents into the same directory as index.html. After that, you can load the Bootstrap CSS into your project like this:
You will notice that this includes the file path at which to find the Bootstrap file. In your case, make sure your path corresponds to your actual setup. For example, the names of the directories might differ if you downloaded a different version of Bootstrap.
0 Comments