Creating a Website with Bootstrap

In this lesson, Mytour will guide you through creating a website with Bootstrap. Additionally, readers can refer to some Bootstrap tutorials already available on Mytour to delve into the details of Bootstrap.

Creating a Website with Bootstrap

1. Requirements

Before diving into the steps to create a website using Bootstrap, ensure that you have a code editor installed and grasp basic HTML and CSS concepts.

2. Creating a Website Using Bootstrap

Next, we will proceed to create a Bootstrap template containing Bootstrap CSS and JS files, as well as other JavaScript dependencies like jQuery and Popper.js via CDN.

Mytour advises you to add Bootstrap to your project via CDN (Content Delivery Network). CDNs store files on multiple servers globally, so when users request them, these files are retrieved from the server closest to them. Overall, this invisibly helps minimize loading time and improve performance.

Refer to the detailed steps below for implementation:

2.1. Step 1: Create a Basic HTML File

Open any code editor installed on your computer and create a new HTML file. Copy and paste the following code snippet into the code editor window, then save the file as 'basic.html', on the desktop screen.

Tip: We include the meta tag in the head section of the document to enable zoom and ensure proper content display on mobile devices.

2.2. Step 2: Convert HTML File to Bootstrap Template

To convert the HTML file into a Bootstrap template, simply add the Bootstrap CSS and JS files, as well as other JavaScript dependencies like jQuery and Popper.js required by their CDN links.

Optimally, add JavaScript files at the end of the page, right before the body closing tag to enhance web page performance, as shown in the example below:

The returned result takes the following form:

Once Bootstrap CSS and JS files, along with jQuery and Popper.js libraries, are added, we can commence developing any website or application using the Bootstrap framework.

The integrity and crossorigin attributes have been appended to CDN links for implementing Subresource Integrity (SRI).

This feature enhances security measures to mitigate risks of attacks originating from unauthorized CDN access, by ensuring that the files your website fetches (from CDNs or any location) are sent without containing any malicious code or unauthorized modifications. It operates by allowing users to provide cryptographic hash functions that must match the loaded files.

Tip: If visitors access your website, a site from which you've downloaded Bootstrap's CSS and JS files from the same CDN, while accessing other websites, the files will be fetched from the browser cache instead of being downloaded again, resulting in faster loading times.

2.3. Step 3: Save and view the file

The final step is to save the file as 'bootstrap-template.html' on the destop screen.

To open a file in a web browser, locate and right-click on the file, select any web browser you want to open the file with. Alternatively, open the browser first, then drag and drop the file into the window.

Note: An important point to note is that the file extension must be .html. Some text editors, such as Notepad on Windows, will automatically save the file with the extension .txt.

3. Download Bootstrap files

To download Bootstrap's CSS and JS files, you can visit the homepage and add them to your project. There are 2 versions of Bootstrap available for download, including the compiled version and the open-source version.

To download Bootstrap 4 files, visit here.

The compiled version of Bootstrap contains minified CSS and JavaScript files, making web development faster and easier. However, it doesn't include JavaScript dependencies like jQuery and Popper.js. The source download contains CSS and JavaScript source files, along with a local copy of the documentation.

To download the compiled Bootstrap file, visit here.

After downloading and extracting the file, you'll find inside the extracted folder CSS and JS files compiled (bootstrap.*), as well as minified CSS and JS files (bootstrap.min.*). You can use the bootstrap.min.css and bootstrap.min.js files.

Using the minified versions of CSS and JS files improves website performance and saves considerable bandwidth due to fewer HTTP requests and smaller download sizes.

The lesson above has just guided you on creating a website using Bootstrap. Additionally, if you have any doubts or questions needing clarification, readers can leave their comments in the section below the article.

In the next article, Mytour will further introduce you to the Grid System in Bootstrap.