How to Use Bootstrap in HTML Web Page (Step-by-Step)

How to Use Bootstrap in HTML Web Page (Step-by-Step)

Bootstrap is a most popular front-end web framework that helps you build mobile-friendly responsive websites quickly and easily. First developed by Twitter, it now powers anything from web applications.

With the Bootstrap framework, you can appeal to complex web pages from standard HTML and customize them to your needs. It also comes with extra functionality such as slider, responsive navigation menu, buttons, carousels, popups, and more.

Finally, the Bootstrap framework gives you many shortcuts for creating beautiful web pages that will save you time and energy. All you need is a basic understanding of HTML and CSS codes to create responsive web pages, mobile-first and compatible with modern browsers.

Tip: While the Bootstrap framework is incredible, but it’s not a perfect option for complete beginners. If you have zero experience using web page markup, alternatively, you can use an easy-to-use website builder or WordPress to create a website.

In this tutorial, learn how to create an HTML web page using the Bootstrap framework. I will use the Bootstrap 4 version.

Creating Your First Web Page with Bootstrap

But before beginning, be sure to have a code editor such as Visual Studio Code, Notepade++, or Sublime Text.

Well, let’s get started creating our first Bootstrap-powered website page.

We will create a basic Bootstrap template by including the Bootstrap CSS and JS files and other JavaScript dependencies like jQuery via CDN.

Tip: I recommend adding the Bootstrap framework to your web project via CDN (Content Delivery Network) because CDN offers excellent performance benefits by reducing the loading time. CDN provider hosting the files on multiple servers spread across the globe. When a user requests the CDN file, it will serve from the server nearest to them.

Let’s stroll through the following steps. At the end of this easy guide, you will 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 with HTML Stucture

First, you will need to open up your code editor and create a new HTML file. You will start with an empty file and type the following HTML codes and save it as “firstsite.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>Welcome</title>
</head>
<body>
    <h1>Welcome to my frist web page!</h1>
</body>
</html>

Step 2: Making HTML File with Bootstrap framework

Tip: Always use the viewport <meta> HTML tag inside the <head> tag section of your HTML document to enable touch zooming and ensure proper rendering on mobile devices.

To make this plain HTML file with Bootstrap framework, include the Bootstrap CSS and JS files and required jQuery using their CDN links.

You should add JavaScript files at the bottom of the web page, right before the closing </body> HTML tag, to improve your web pages performance, 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>Bootstrap Template</title>
    <!-- Bootstrap CSS file -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to my frist web page!</h1>
    <!-- JS files: jQuery first, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

After adding Bootstrap’s CSS and JS files and the required jQuery library, you can begin to design any web page or application with the Bootstrap framework.

Step 3: Saving and Viewing the HTML File

Now save the HTML file on your desktop as “firstsite.html”(I’ve mentioned before).
To open this HTML web page file in a web browser, navigate the web page file, right-click on it, and select your favorite web browser.

Another way you can open your browser and drag this HTML web page file to it.

Note: The extension .html must specify for the web page file. Several text editors, such as Notepad on Windows operating system, will automatically save it as .txt otherwise.