February 10, 2022

How to Setup Bootstrap for Local and Offline Use

JavaScript

1. Overview

In this article, we’re going to look at how we can make use of Bootstrap CSS and Javascript resources locally so that we can continue learning even without an active internet connection.

2. Downloading CSS and Javascript Resources

We first need to download the actual Bootstrap file from the official website at https://getbootstrap.com/docs/4.0/getting-started/download. On the resulting page, we’re going to click on the Download button after the Compiled CSS and JS title.

The downloaded file, bootstrap-4.0.0-dist.zip, is a zip file that’s just 592 KB in size - pretty small. We should unzip it using either Winrar, 7zip or other similar tools. After unzipping it, we will have a folder with the name bootstrap-4.0.0-dist on our system.

The next file that we will need is the jQuery Javascript file and we can download it by going to this URL https://code.jquery.com/jquery-3.6.0.js.

After opening the URL, we may see a bunch of code in our browser. All we need to do to save it locally is to press Ctrl + S on Windows OS or Cmd + S on MacOS. This will prompt our browser to save the file with the name jquery-3.6.0.js in our Downloads folder.

We got all the files we need now, let’s connect them together in a sample project.

3. Using Bootstrap Locally (offline)

Let’s create an example project to demonstrate how to use all the files locally. First, we’ll create a new folder called bootstrap-offline. This will be the root folder of our project. It is called root because it will contain other folders and files.

Next, we will create two new folders in the bootstrap-offline, namely:

bootstrap-offline/css
bootstrap-offline/js

Now, we will copy bootstrap-4.0.0-dist/css/bootstrap.css to bootstrap-offline/css/bootstrap.css.

Furthermore, we will copy bootstrap-4.0.0-dist/js/bootstrap.js to bootstrap-offline/js/bootstrap.js.

Lastly, we will copy the jquery-3.6.0.js we downloaded earlier into bootstrap-4.0.0-dist/js/jquery-3.6.0.js.

To wrap it up, we will create a new HTML file called bootstrap-offline/hello.html with the following content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Offline Bootstrap</title>
	<link rel="stylesheet" href="./css/bootstrap.css">
	<script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/bootstrap.js"></script>
</head>
<body>
	<div class="jumbotron text-center">
  		<h1>My Offline Bootstrap Page</h1>
  		<p>This page is using local Bootstrap CSS and JS files</p>
	</div>
</body>
</html>

In the snippet above, note that we added jquery-3.6.0.js before adding bootstrap.js. This is because bootstrap.js requires jquery-3.6.0.js to work.

We can open the hello.html file in the browser to see the awesome page, turn off the internet and it will still work.

4. Conclusion

In this article, we’ve been able to look at how we can download and use Bootstrap CSS and Javascript resources offline. This skill is peculiar and can help keep one working in the absence of an internet connection.

How to Setup Bootstrap for Local and Offline Use

1. Overview

2. Downloading CSS and Javascript Resources

3. Using Bootstrap Locally (offline)

4. Conclusion

Seun Matt

Recommended

Two Years at Cellulant - My 2024 Career Recap

Introduction to Spring Boot

How to use HTML templates in a Spring Boot application + Freemarker Template Engine

How to Automatically Encrypt Sensitive Information in Database Columns

How to Implement HMAC Signature in Spring Boot for Secure API Requests

Tags