BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
Advertisements

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

Now we're going to create a basic Bootstrap template by including the Bootstrap CSS and JS files, as well as other JavaScript dependencies like jQuery and Popper.js via CDN.

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.

<!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>

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 as well as required jQuery and Popper.js using their CDN links.

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, as shown in the following example:

<!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.

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.

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 4 files from here.

Compiled download contains compiled and minified version of CSS and JavaScript files for faster and easier web development. The compiled version however doesn't include any optional JavaScript dependencies such as jQuery and Popper.js. 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.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: Please note that Bootstrap's JavaScript plugins require jQuery to be included. You can download the latest version of jQuery form here https://jquery.com/download/. You also need to include Popper.js before Bootstrap's JS in order for tooltips to work!

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.