Getting Started With Bootstrap 5

In this tutorial, you will learn how to get started with Bootstrap 5. But before beginning, be sure to have a code editor and some working knowledge of HTML and CSS.

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

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 now

Step 2: Making This HTML File As 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 the 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.

Source Code

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

Try it now

Code Explanation

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 your desktop and right-click on the first-page.html , and select open with {existing browser i.e. chrome/Firefox/opera, etc.}. You can see the result of your HTML code.

Note: An Internet connection will be required during testing.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4