Bootstrap 4 Get Started

In this tutorial, you will learn how easy it is to create a web page using the bootstrap framework. 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 Javascript 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.

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>
    <h2>Hello, world!</h2>
  </body>
</html>

Try it now

Step2: 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:

Source Code

          <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>Getting Started With Bootstrap 4</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />
   </head>
   <body>
      <h1 class="mt-5">Hello, world!</h1>
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
   </body>
</html>

Try it now

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

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4