In this tutorial you will learn how to create a web page using Bootstrap framework.
Getting Started with Bootstrap
In this tutorial you will learn how easy it is to create a web page using Bootstrap. But before begin, be sure to have a code editor and some working knowledge of HTML and CSS.
Well, let’s get started creating our first Bootstrap powered web page.
Creating Your First Web Page with Bootstrap
Now we’re going to create a basic Bootstrap template by including the Bootstrap CSS and JS files via CDN. Bootstrap requires a third-party library Popper.js for some of its components like popovers and tooltips. You can either include it separately or simply include Bootstrap JS bundled with Popper.
We recommend adding Bootstrap in your project via CDN (Content Delivery Network) because CDN offers performance benefit by reducing the loading time, since they are hosting the files on multiple servers spread across the globe so that when a user requests the file it will be served from the server nearest to them. We’re also using the CDN links in our examples:
Let’s walk through the following steps. At the end of this tutorial, you’ll have made a simple Bootstrap powered web page that displays “Hello world” message in your web browser.
Step 1: Creating a Basic HTML file
Open up your favorite code editor and create a new HTML file. Start with an empty window and type the following code and save it as “basic.html” on your desktop.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML File</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Tip: Always include the viewport <meta> tag inside the <head> section of your document to enable touch zooming and ensure proper rendering on mobile devices.
Step 2: Making this HTML File a Bootstrap Template
In order to make this plain HTML file a Bootstrap template, just include the Bootstrap CSS and JS files using their CDN links. Also, you should include JavaScript files at the bottom of the page, right before the closing </body> tag to improve the performance of your web pages.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>And we’re all set! After adding the Bootstrap’s CSS and JS files to our HTML page, we can begin to develop any responsive site or application with the Bootstrap framework.
The attributes integrity and crossorigin have been added to CDN links to implement Subresource Integrity (SRI). It is a security feature that enables you to mitigate the risk of attacks originating from compromised CDNs, by ensuring that the files your website fetches (from a CDN or anywhere) have been delivered without unexpected or malicious modifications. It works by allowing you to provide a cryptographic hash that a fetched file must match.
Note: The biggest change in Bootstrap 5 is it doesn’t require jQuery anymore. However, you can still use jQuery to quickly implement Bootstrap component’s methods and options. If Bootstrap detects jQuery in the window object it’ll add all of its components in jQuery’s plugin system. You will learn about them in advanced section of this tutorial series.
Tip: If the visitor to your website has already downloaded the Bootstrap’s CSS and JS files from the same CDN while visiting the other sites, it will be loaded from the browser’s cache instead of re-downloading, which leads to faster loading time.
Step 3: Saving and Viewing the File
Now save the file on your desktop as “bootstrap-template.html”.
To open this file in a web browser, navigate to it, then right click on it, and select your favorite web browser. Alternatively, you can open your browser and drag this file to it.
Note: It is important that the extension .html is specified, some text editors, such as Notepad on Windows, will automatically save it as .txt otherwise.