Bootstrap Getting Started
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.
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
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.
ExampleTry this code »
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Basic HTML File</title> </head> <body> <h1>Hello, world!</h1> </body> </html>
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 as well as required jQuery and Popper.js using their CDN links.
</body> tag to improve the performance of your web pages, as shown in the following example:
ExampleTry this code »
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Basic Bootstrap Template</title> <!-- Bootstrap CSS file --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <!-- JS files: jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
And we're all set! After adding the Bootstrap's CSS and JS files and the required jQuery and Popper.js library, we can begin to develop any site or application with the Bootstrap framework.
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.
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
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 4 files from here.
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
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.