Getting Started With Boostrap 5

In this tutorial, you will learn how easy it is to create a web page using Bootstrap. But before beginning, 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 benefits 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 the "Hello world" message in your web browser.

Note: 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 the "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.

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

Try it yourself

Step 2: Making this HTML File a Bootstrap Template

In order to make this plain HTML file to a Bootstrap template, just include the Bootstrap CSS and Javascript 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:

General Syntax

      <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Hello, world!
    </title>
  </head>
  <body>
    <h1 class="mt-5">Hello, world!
    </h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
    </script>
  </body>
</html>

Step3:Saving The Created File

To save the created file, you have to move on to the File menu and click on the save option. Now save the file on the desktop as 'first-page.html'.

Now go to desktop and right-click on first-page.html and select open with option and select open with {existing browser i.e chrome/firefox/opera etc.}. Now you can the result of your HTML code.

Note: Internet connection will be required during testing.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS