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.
If you’re just starting out in the world of web development, start learning from here »
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/[email protected]/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/[email protected]/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.
Downloading the Bootstrap Files
Alternatively, you can also download the Bootstrap’s CSS and JS files from their official website and include in your project. There are two versions available for download, compiled Bootstrap and Bootstrap source files. You can download Bootstrap 5 files from here.
Compiled download contains compiled and minified version of CSS and JavaScript files for faster and easier web development. The compiled version also includes optional JavaScript dependencies such as Popper bundled with Bootstrap JS (bootstrap.bundle.*). Whereas, the source download contains original source files for all CSS and JavaScript, along with a local copy of the docs.
Download and unzip the compiled Bootstrap. Now if you look inside the folders you’ll find it contains the compiled CSS and JS files (bootstrap.*), as well as the compiled and minified CSS and JS (bootstrap.min.*). Use the bootstrap.min.css and bootstrap.bundle.min.js files.
Using the minified version of CSS and JS files will improve the performance of your website and saves the precious bandwidth because of lesser HTTP request and download size.
Tip: There’s no need to include the required Popper.js (in order to make the Bootstrap’s tooltip and popover components work) separately, as it is already included in the “bootstrap.bundle.js” and minified “bootstrap.bundle.min.js” files.
Leave a Reply